最近在开发一个大型vue单页面应用的时候，项目最初是将所有的路由写在一个router.js的文件里。
const router = new Router({
mode: "history",
routes: [{
path: '/',
name: 'Index',
component: include('index', 'home')
},
{
path: '/aboutus',
name: 'aboutUs',
component: include('aboutUs', 'home')
},
{
path: '/feedback',
component: include('feedback', 'home'),
redirect: '/feedback/service',
children: [{
path: '/feedback/service',
component: include('Service', 'home/feedback'),
},
{
path: '/feedback/view',
component: include('view', 'home/feedback'),
}]
}]
}
随着业务代码的增长路由很快就会嵌套更深，新增很多路由，这样不利于后续的代码维护。
然而require.context()是什么？
想要实现去中心化管理我们就需要使用到require.context()
然后有了require.context()这个方法，我们就可以通过正则匹配引入相应的文件模块。
require.context(directory, useSubdirectories, regExp)
require.context()有三个参数：
- directory：说明需要检索的目录
- useSubdirectories：是否检索子目录
- regExp: 匹配文件的正则表达式
使用require.context()改造后的allRouters.js文件
示例：
const routes = require.context('@/view', true, /router.js$/)
// （你创建了）一个view文件夹下面（不包含子目录），能被require请求到，所有文件名以
.router.js 结尾的文件形成的上下文（模块）。export default routes.keys().map(key => (routes(key).default || routes(key)))
以后只要业务模块route文件遵循统一的目录结构，业务模块route就能被自动关联到这个allRouters.js里。
然后在route下index.js里引入
import Vue from 'vue'
import Router from 'vue-router'
import allRouters from './allRouters'
Vue.use(Router)
export function createRouter () {
const router = new Router({
'mode': 'history',
'routes': [
...allRouters
]
})
}...等等其他操作
这个思路也可应用于其他想要实现"去中心化"管理的功能模块，比如vuex的store模块。