1. 寫在前面

關於 vue-router 的相關文件：
1. vue-router 官方文件
2. 網上很多優秀的教程，請自行百度。
3. 專案demo程式碼。github

2 路由按模組配置

通常我們將路由寫在 /src/router/index.js 檔案中，需要配置的路由太多，該檔案就變成很長，不利於維護。如下圖


能不能按照模組來分隔路由，像下圖所示。

2.1 使用ES6擴充套件運算子，分割路由

1./src/router/ 下新建 person.js,error.js。
2.將個人中心功能相關的路由配置，寫在 person.js 中。

// 個人中心，相關路由規則
 

export default [
  {
    path: '/person',
    component: resolve => require(['@/module/layout/index'], resolve),
    children: [
      {
        path: '/',
        redirect: 'index'
      },
      {
        path: 'index',
        name: 'personIndex',
        meta: {
          title: '個人中心',
          requiresAuth: true
 

        },
        component: resolve => require(['@/module/person/index'], resolve)
      }
    ]
  }
]

3.將錯誤頁面相關的路由配置，寫在 error.js 中。

export default [
  {
    path: '/404',
    meta: {
      title: '頁面不存在',
      requiresAuth: false
    },
    component: resolve => require(['@/module/error/404'], resolve)
  },
  {
    path: '/noAuth'
 
,
    meta: {
      title: '無許可權',
      requiresAuth: false
    },
    component: resolve => require(['@/module/error/noAuth'], resolve)
  },
  {
    path: '*',
    redirect: '/404'
  }
]

4.修改 /src/router/index.js 檔案。

import Vue from 'vue'
import Router from 'vue-router'
// 個人中心模組路由
import person from './person'
// 錯誤頁面
import error from './error'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    ...person,
    // 404,500 錯誤頁面
    ...error
  ]
})

5.這樣 /src/router/index.js 頁面更簡潔。

2.2 路由懶載入

很多教程都沒有提到懶載入，小編覺得這同樣很重要，提一嘴。
1. 當打包構建應用時，Javascript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。
2. 結合 Vue 的非同步元件和 Webpack 的程式碼分割功能，輕鬆實現路由元件的懶載入。
3. 懶載入，官方文件
4. 懶載入在 js 中寫法，如上面截圖中 component 的引入。

path: 'index',
name: 'personIndex',
meta: {
  title: '個人中心',
  requiresAuth: true
},
// 懶載入 *.vue檔案
component: resolve => require(['@/module/person/index'], resolve)

2.3 修改頁面的 title

由於是單頁面, 頁面title<title>vue-demo</title> 寫在 /index.html 檔案中，每個頁面的title應該是不一樣，動態載入的，這裡用到 路由導航守衛。
1. 在/router/*.js定義路由時，加上 meta.title 屬性。

// router/person.js檔案
path: 'index',
name: 'personIndex',
// 定義頁面的title
meta: {
  title: '個人中心'
},
// 懶載入 *.vue檔案
component: resolve => require(['@/module/person/index'], resolve)

1. 在 /src/main.js 中，定義前置守衛

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// router
import router from './router/index'

Vue.config.productionTip = false

// 路由導航守衛
router.beforeEach((to, from, next) => {
  // 更改頁面 title
  if (to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = 'my-menu'
  }
  next()
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  template: '<App/>',
  components: { App }
})

1. 其實導航守衛可以做更多的事情，比如判斷登入狀態或許可權進行攔截頁面等。

3. 未完待續…