错误截图

踩坑原因

在配置vue-router的路由时和将router实例挂载至Vue实例上时，实例名称没有按照标准

配置vue时

在配置vue-router时，我们一般会将路由的映射关系抽成一个数组，就想下面这样

const routes = [{
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/category',
    component: Category
  },
  {
    path: '/shopcart',
    component: ShopCart
  },
  {
    path: '/profile',
    component: Profile
  }
];

然后再将这个路由映射数组添加至VueRouter对象中，然后导出，就像下面这样，在添加至VueRouter实例时，可以采用ES6的新写法，即直接写数组名routes

export default new VueRouter({
  routes,
  mode: 'history',
})

坑就在这，如果你在上面配置路由映射关系的数组时的数组名不叫routes，而是route1，那么你在下面添加至VueRouter实例时，你很可能会这样写，于是你就入坑了。。。。

export default new VueRouter({
  route1,
  mode: 'history',
})

解决方法有二

第一种：数组名直接取名为routes，然后再添加至VueRouter实例时这样写

export default new VueRouter({
  routes,
  mode: 'history',
})

第二中：数组名字随便起，在添加至VueRouter实例时这样写

export default new VueRouter({
  routes:你起的数组名
  mode: 'history',
})

挂载到Vue实例中时

同理，vue实例名称只能是router，解决方法与上面一样

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

总结

在使用vue-router时，记住两个特殊的名字routes与router