自己写vue多页面router路由居然报错 TypeError: Cannot read property ‘matched‘ of undefined“

自己第一次创建工程化前端项目配置路由出错，还是太菜了呜呜

没改之前代码

import Vue from 'vue'
import App from './App.vue'
//  导入路由
import VueRouter from 'vue-router'

Vue.config.productionTip = false
Vue.use(VueRouter);
new Vue({
  render: h => h(App),
}).$mount('#app')

检查app.js配置文件发现是忘记导入router的js配置文件，new Vue中也是没有使用，

查看过官方文档之后，原来是忘记配置了

 

经过加上后，就可以

import Vue from 'vue'
import App from './App.vue'
//  导入路由
import VueRouter from 'vue-router'
import router from "./routers/index"

Vue.config.productionTip = false
Vue.use(VueRouter);
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

自己有手贱先尝试自定义名字发现，也会出如此的问题

import Vue from 'vue'
import App from './App.vue'
//  导入路由
import VueRouter from 'vue-router'
import index from "./routers/index"

Vue.config.productionTip = false
Vue.use(VueRouter);
new Vue({
  index,
  render: h => h(App),
}).$mount('#app')

修改成这样子就好啦

import Vue from 'vue'
import App from './App.vue'
//  导入路由
import VueRouter from 'vue-router'
import index from "./routers/index"

Vue.config.productionTip = false
Vue.use(VueRouter);
new Vue({
  router:index,
  render: h => h(App),
}).$mount('#app')

所以要注意哦：vue-router要匹配对应的   固定的属性名router名来匹配vue-router