vue-router多人协同去中心化解决方案

vue-router

vue-router系列：

• vue-router多人协同去中心化解决方案

---

---

前言

大家在自己一个人使用vue进行开发时，往往将用到的路由配置都写在脚手架的router/index.js中，但这样路由耦合度高，配置的可读性低，文件的导入往往杂乱无章，尤其是在多人协同开发的场景下，更不利于代码的统一和维护，这时我们需要对路由配置进行去中心化处理

---

一、去中心化的概念和思路

首先看一张图：

去中心化的大致概念就是将路由配置按功能(或页面)划分开来，实现思路是每个功能中的路由配置单独来写，最后使用require.context方法来动态导入到主配置文件index.js中，这样就能够解决路由配置的耦合性，特别是多人协同的时候，大家分别负责不同模块的书写，就可以在合并时降低发生冲突的可能性。

二、具体如何实现

1.require.context

在前端项目中解决工程化问题，自动化导入模块就可以使用require.context方法，这是webpack的一个api，这个方法依次接收3 个参数：

• 要搜索的文件夹目录
• 是否搜索该目录的子目录
• 一个匹配文件的正则表达式

require.context(directory, useSubdirectories = false, regExp = /^.//)

require.context返回一个函数，其中有三个属性，这里重点关注其中的key属性，key属性是一个方法，会返回一个数组，由当前匹配到结果下所有模块组成。

2.示例

[举个栗子] 比如现在在开发项目之前开发成员约束好，在router文件夹下在书写相关功能配置的规范是：自创功能文件夹，并在功能文件夹下创建一个.js文件来书写配置，目录结构如下：

|   |-- router