vue-router 模块化

在使用vue开发中，前期常常会将所有的路由写在一个文件中。但是当项目过大的时候，会面临路由文件过程，难以维护的问题。通过webpack的require.context()函数，可以自动导入vue-router模块。

1.分割路由文件

router                           // 路由文件夹
  |__index.js                    // 路由组织器：用来初始化路由等等
  |__modules                     // 业务逻辑模块：所以的业务逻辑模块
        |__index.js              // 自动化处理文件：自动引入路由的核心文件
        |__a.js                  // 业务模块a
        |__b.js                  // 业务模块b
        |__c.js                  // 业务模块c
  

2.modules文件夹

modules文件夹中存放着所有的业务模块与自动化引入的index.js。业务模块内容根据具体业务自行编写。本文代码仅为示例。

//    a模块
export default [
    {
        path: '/a',
        name: 'A',
        component: A,
        meta: {
            name_str: '首页'
        }
]

自动化导入模块index.js

const manageFiles = require.context('.', true, /\.js$/)

console.log(manageFiles.keys()) // ['./a.js'] 返回一个数组，包含全部文件名
let configRouters = []
manageFiles.keys().forEach(key => {
  if (key === './index.js') return //    如果是当前文件，则跳过
  configRouters = configRouters.concat(manageFiles(key).default) // 读取出文件中的default模块
})
export default configRouters // 抛出一个Vue-router期待的结构的数组

路由初始化

import Vue from 'vue'
import VueRouter from 'vue-router'
import RouterConfig from './modules' // 引入业务逻辑模块
Vue.use(VueRouter)


export default new VueRouter({
  scrollBehavior: () => ({ y: 0 }),
  routes: RouterConfig
})