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 // vue路由管理文件夹
|