前言

今天用 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哦

感谢你的观看。