vue路由使用問題：Error in render TypeError Cannot read property 'matched' of undefined

記一個使用vue-router時的低級錯誤。

使用vue-router時，打開網頁出現如下錯誤：

一開始我以為是vue-router沒有安裝好，重裝后發現問題仍然存在。仔細檢查過后發現問題出在沒有在main.js中的Vue實例對象中掛載vue-router對象：

在此總結一下使用vue-router的步驟

• 首先安裝好vue-router后中，配置router文件夾下的index.js時分如下三步：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 采用懶加載的方式引入組件
const Home = () => import('../views/home/Home');

//1.安裝插件
Vue.use(VueRouter);

//2.創建路由對象
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  
]
const router = new VueRouter({
  routes,
  mode: "history"
})

//3.導出router
export default router

注意要進行導出。

• 在main.js中引入index.js中導出的router對象，並在新建的Vue對象中引用。

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //不要忘了掛載router
  router,
  render: h => h(App)
})