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在编译构建时去分析，从而解除依赖。

关于解耦的问题，我以为也是一个能够好好讨论的点，有时间再和你们一块儿分享分享啦！感谢各位百忙之中抽出时间观看！！！