閱讀須知：示例代碼以vue-router為例谈跛。其他路由同樣適用，如：react-router刽沾。同樣其他的功能模塊也可以用該思路進行相應的去中心化管理改造读处。
一個項目中路由的變化過程
當你在開發(fā)一個大型單頁面應用的時候，項目之初一般做法是所有的路由規(guī)則都維護在一個route.js的文件里猜惋。當路由變的越來越大丸氛，大到已經難以維護時。我們對路由按業(yè)務模塊進行拆
import monthly from './monthly/router'
import statistics from './statistics/router'
import report from './report/router'
import settings from './settings/router'
import bonus from './bonus/router'
import entry from './entry/router'
import history from './history/router'
import vote from './vote/router'
import adjust from './adjust/router'
export default [{
name: 'salaryManage2.salary',
path: 'salary',
redirect: {name: 'salary2.monthly.list'},
component: r => require.ensure([], () => r(require('./salaryHome.vue')), 'salary'),
children: [
...monthly,
...adjust,
...statistics,
...report,
...settings,
...bonus,
...entry,
...history,
...vote
// 其他大量新增路由
]
}]
隨著業(yè)務代碼的增長著摔，我們不斷的在后面增加缓窜，不斷的import，越來越長谍咆。但如果想達到連一行代碼都不用加禾锤？實現徹徹底底的去中心化管理。
require.context是什么摹察？
想要徹徹底底的實現去中心化管理我們需要使用到require.context
webpack官方文檔的介紹require.context
簡單說就是：有了require.context恩掷，我們可以通過正則匹配引入相應的文件模塊。
require.context(directory, useSubdirectories, regExp)
require.context有三個參數：
- directory：說明需要檢索的目錄
- useSubdirectories：是否檢索子目錄
- regExp: 匹配文件的正則表達式
使用require.context改造后的rootRoute.js文件:
const routers = require.context('./', true, /^\.\/((?!\/)[\s\S])+\/router\.js$/)
export default [{
name: 'salaryManage2.salary',
path: 'salary',
redirect: {name: 'salary2.monthly.list'},
component: r => require.ensure([], () => r(require('./salaryHome.vue')), 'salary'),
children: routers.keys().map(key => {
const it = routers(key).default
return it[0]
})
}]
優(yōu)化后港粱，新增一個業(yè)務模塊螃成，只要業(yè)務模塊route文件遵循統(tǒng)一的目錄結構。業(yè)務模塊route就能被自動關聯到rootRoute里查坪。
