前言
今天用 Vue-cli 搭建 Vue 项目时，发现Router无法正常挂载，不是无法new出来，或者是抛出 vue-router.esm-bundler.js?6c02:2127 Uncaught TypeError: Object(…) is not a等错误！
本篇文章讲述关于Vue-cli下怎么配置VueRouter
配置
项目环境
项目代码
main.js
import Vue from 'vue'
import App from './App.vue'
import axios from "axios"
import VueRouter from "vue-router"
// 声明 component
import AxiosTest from "./components/AxiosTest.vue"
import HelloWorld from "./components/HelloWorld.vue"
Vue.use(VueRouter)
// 定义Axios
Vue.prototype.$http = axios
// 定义路由
let router = new VueRouter({
routes:[
{path: "/helloWorld",name: "HelloWorld",component: HelloWorld},
{path: "/",redirect: "/axios"},
{path: "/axios",name: "AxiosTest",component: AxiosTest}
]
})
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- 路由模块 -->
<div class="content">
<!-- 定义路由 -->
<router-link to="/helloWorld">HelloWorld</router-link>
<router-link to="/axios">Axios</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
问题处理
我通过HbuilderX默认创建的Vue项目，同时直接通过vue install vue-router 默认安装版本为：4.0以上
通过使用命令：npm install vue-router@3.1.0 --save
重新安装一下Vue-Router版本即可！
结束语
今天我们讲解了一下SpringMVC中返回JSON数据或对象导致页面406缺省报错的解决方式
- 如果对你有帮助的话可以给我点赞收藏，十分感谢
- 致力做优、好、细、精学习笔记分享给大家
- 可以转载 需标明 出处 本文链接。
- 笔者一个开源项目：餐饮管理系统 希望大家可以点一下star哦
感谢你的观看。
