分布式动态路由的实现

设想一下，我们在做一个体量非常大的项目，这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候，我们打开了router文件夹下的index.js文件时，一串长到鼠标滚轮需要滚大半天才滚到底的路由简直让人头皮发麻。

把项目全部模块的路由都放在一个文件中，不仅直观，在添加新路由的时候更是无从下手。

今天我给大家分享一下分布式动态路由，很简单，五分钟就能学会。用处也非常的大，一起往下看吧！

在开始之前先说说适用的场景：体量非常大的项目，且这个项目分为很多的模块。

我们分布式动态路由的目的就是：实现路由模块自动化引入，让路由更加清晰直观。

废话不多说直接开始：

假设我们的项目中有两个模块，login模块和goods模块。那么在目录中就是这样的：

（每个模块下都是自己模块的页面，当然不只是一个，这里只是一个简单的例子方便大家理解）

然后我们修改一下router文件夹，添加login.router.js文件和goods.router.js，将文件两个模块的路由分别存放。如图所示：

下面是login.router.js的代码：

export default {
    path: '/login',
    name: 'login',
    component: () =>
        import ('../views/login/login'), //懒加载
    children: []
} 
1
2
3
4
5
6
7

goods.router.js也是同样的道理:

export default {
    path: '/goods',
    name: 'goods',
    component: () =>
        import ('../views/goods/goods'), //懒加载
    children: []
} 
1
2
3
4
5
6
7

接下来是核心代码（router文件夹下的index.js文件中），也是分布式动态路由实现的关键：

//index.js
import VueRouter from 'vue-router'
​
const routerList = []
​
function importAll(r) {
    r.keys().forEach((key) => {
        routerList.push(r(key).default)
  })
}
​
importAll(require.context('./', false, /.router.js/))
​
export default new VueRouter({
    routes: routerList
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这样，我们的分布式动态路由就实现好了，是不是很简单！

接下来我们来实验一下，浏览器地址栏输入http://localhost:8080/#/login，页面正常显示：

输入http://localhost:8080/#/goods也是同样的结果。

那我们来新添加一个模块呢？直接添加下图的文件，因为我们已实现了路由自动化引入，所以根本不用修改router文件夹下的index.js文件

bill.router.js的代码：

export default {
    path: '/bill',
    name: 'bill',
    component: () =>
        import ('../views/bill/bill'), //懒加载
    children: []
} 
1
2
3
4
5
6
7

浏览器输入http://localhost:8080/#/bill，实验成功！

如果有没明白的小伙伴，我们在评论区一起讨论吧