vue-router如何去中心化

vue-router做爲Vue官方三大套件之一，在平常開發中成爲了避免可或缺的存在，可是無論多麼niubility的框架或組件，在業務場景不斷髮生改變的同時，不可避免的會出現一些適用性上的問題，這就須要咱們去擴展不一樣的使用場景，以達到業務上的最佳實踐。

vue-router使用姿式

按照vue-router官方的使用文檔中，咱們在配置和使用vue-router的姿式以下：

• 組件與路由的映射匹配

// router/index.js
const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About }
]

export default routes
複製代碼

• 掛載router

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import routes from './router/index.js'
const router = new VueRouter({
    routes
});

new Vue({
    el: '#app',
    //讓vue知道咱們的路由規則
    router: router,
    render: c => c(App),
})
複製代碼

ok，如今咱們就能夠在咱們的組件中經過this.$route來操做路由相關屬性及方法了。簡直so easy！

vue-router的中心化問題

何爲中心化？

談到中心化，咱們想到比較多的可能就是區塊鏈。那廣義上的中心化如何理解？簡單點說，就是在一個體系中某個節點要和另外的節點產生聯繫，就必定要經過特定的某個節點，這個節點就是一箇中心。

vue-router的中心化

剛講到中心化的概念，那咱們能夠拿上面vue-router實踐的例子來對照一下。 咱們在router/index.js中定義或加載全部的路由配置，那這個文件就是這個項目當中惟一的引用路由的節點（中心）。那中心節點會存在什麼問題呢？

1. 文件衝突：尤爲是在使用svn這種集中式版本控制服務，沒有分支的概念，所有依賴一個遠程中心倉庫。
2. 發佈故障：試想多人同時修改同一個文件，在發佈流程不是很是完善，且相互溝通不暢的狀況下，容易出現某個正在開發的需求被另外一個一樣發佈中的需求帶上線了，但另外一個需求的相關依賴並無上線。致使生產環境編譯錯誤從而引起線上故障。

下面咱們用一個比較簡單的發佈模型來講明。

模擬開發場景：

1. 2人同時開發一個項目。
2. 2個需求分別新建了2個router配置。
3. 如今2個需求都開發完了，準備繼續後續的測試->發佈流程。

PS: 上述的場景不必定發生，跟對應開發團隊的發佈流程相關。在開發流程比較完善的狀況下是能夠避免該問題的。

如何解決

• 模塊化
• require.context

1. 模塊化

能夠將路由按業務模塊劃分場景，對應模塊下有一個獨立的入口文件，儘量保證相同業務需求不會出現路由文件衝突的狀況。

對應的加載路由的配置能夠修改成

// moduleA/index.js
import routeA from './moduleA-xx'
import routeA2 from './moduleA-xx2'
// 在這裏擴展moduleA的路由配置
const routes = [].concat(routeA, routeA2)

export default routes
複製代碼

// router/index.js
import moduleA from './moduleA/index'
import moduleB from './moduleB/index'

const routes = [].concat(moduleA, moduleB)
複製代碼

2. require.context

官方文檔的說明是require.context使用 directory 路徑、includeSubdirs 選項和 filter 來指定一系列完整的依賴關係，便於更細粒度的控制模塊引入。

文檔地址：webpack.js.org/guides/depe…

簡單來講，經過require.context咱們能夠經過正則動態匹配並引入咱們的依賴文件，這樣咱們不須要顯示的去加載咱們的路由文件，從而解耦router的入口文件和對應route配置的依賴關係。在這裏咱們經過它來實現咱們的路由去中心化。

咱們約定router目錄下全部的.js文件默認都爲route的配置文件，經過require.context加載的代碼以下。

// 加載router目錄下全部js文件做爲路由配置
let routes
let matches = require.context('./', true, /^\.\/[^/]+\/.+\.js$/)
matches.keys().forEach(key => {
	routes = routes.concat(matches(key).default)
})
複製代碼

這樣，之後新增或修改路由只須要按照約定在router目錄新建js文件或修改其中的配置便可，router/index.js不須要任何改動便可完成路由配置。

總結

在這裏咱們總結下對於上述問題的一個解決思路，咱們能夠把中心化問題當作是一個依賴解耦的問題。那咱們即可以用解耦的思路來解決中心化的問題，在上述解決方案中，咱們用到了如下手段：

• 單一職責：模塊化拆分路由配置。
• 依賴倒置：經過約定大於配置的方式將入口文件與路由配置細節解耦，將路由配置的顯式加載過程抽象爲經過require.context方式加載，具體的執行過程交由webpack在編譯構建時去分析，從而解除依賴。

關於解耦的問題，我以爲也是一個能夠好好討論的點，有時間再和你們一塊兒分享分享啦！感謝各位百忙之中抽出時間觀看！！！