最近在開發一個大型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模塊。