设想一下,我们在做一个体量非常大的项目,这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候,我们打开了router
文件夹下的index.js
文件时,一串长到鼠标滚轮需要滚大半天才滚到底的路由简直让人头皮发麻。
把项目全部模块的路由都放在一个文件中,不仅直观,在添加新路由的时候更是无从下手。
今天我给大家分享一下分布式动态路由,很简单,五分钟就能学会。用处也非常的大,一起往下看吧!
在开始之前先说说适用的场景:体量非常大的项目,且这个项目分为很多的模块。
我们分布式动态路由的目的就是:实现路由模块自动化引入,让路由更加清晰直观。
废话不多说直接开始:
假设我们的项目中有两个模块,login模块和goods模块。那么在目录中就是这样的:
![](https://i-blog.csdnimg.cn/blog_migrate/8e558f8c851ebf3cf39a5e74d189cc00.png)
(每个模块下都是自己模块的页面,当然不只是一个,这里只是一个简单的例子方便大家理解)
然后我们修改一下router
文件夹,添加login.router.js
文件和goods.router.js
,将文件两个模块的路由分别存放。如图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/9247bdc4bbe82306247b9966cc743ab9.png)
下面是login.router.js
的代码:
export default {
path: '/login',
name: 'login',
component: () =>
import ('../views/login/login'), //懒加载
children: []
}
goods.router.js
也是同样的道理:
export default {
path: '/goods',
name: 'goods',
component: () =>
import ('../views/goods/goods'), //懒加载
children: []
}
接下来是核心代码(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
})
这样,我们的分布式动态路由就实现好了,是不是很简单!
接下来我们来实验一下,浏览器地址栏输入http://localhost:8080/#/login
,页面正常显示:
![](https://i-blog.csdnimg.cn/blog_migrate/947db8fae21379dcb4f02376648d5d15.png)
输入http://localhost:8080/#/goods
也是同样的结果。
那我们来新添加一个模块呢?直接添加下图的文件,因为我们已实现了路由自动化引入,所以根本不用修改router
文件夹下的index.js
文件
![](https://i-blog.csdnimg.cn/blog_migrate/a2ef03e80939345c29195feb45480593.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4e403781dc02ff924e6919e50e004f07.png)
bill.router.js
的代码:
export default {
path: '/bill',
name: 'bill',
component: () =>
import ('../views/bill/bill'), //懒加载
children: []
}
浏览器输入http://localhost:8080/#/bill
,实验成功!
![](https://i-blog.csdnimg.cn/blog_migrate/9a7b5c4d1799d018990a338d012fff53.png)
如果有没明白的小伙伴,我们在评论区一起讨论吧