Vue 2.x框架完善（二）—— vue路由按模块配置

1. 写在前面

关于vue框架API，使用，全家桶等有很多博客可供参考，写的很详细很好。这里写一些小编自己的经验，和其他博客不一样的，仅供参考。
1. vue 官网，你可以去此查看官方文档和API
2. 关于 vue 的博客专栏
3. 前端框架 Vue 初体验 @JesusAllen30

关于 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. 未完待续…