问题:启动Vue项目时,出现预警信息,根据本地路径打开浏览器页面报错:
main.js文件中也正确引入VueRouter包
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router' //引入路由器,具体是router路径下的index.js文件
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
el:'#app',
render: h => h(App),
router:router
})
查看路由器配置(router/index.js):
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import School from '../components/School'
import Student from '../components/Student'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/school',
component:School
},
{
path:'/student',
component:Student
}
]
})
原因:在package.json中可以看到Vue版本为2.6.14,vue-router版本为4.4.0。由于vue与vue-router版本不兼容导致异常。对于Vue2,使用vue-router 3.x 版本;对于Vue3,使用vue-router 4.x 版本。
解决办法:
由于项目中使用vue2版本,所以安装vue-router时指定版本。
npm i vue-router@3.5.2