vue-router 引入子页面组件自动化

原创
2020/10/11 22:35
阅读数 60

vue-router 引入子页面组件自动化

2019.07.05 17:50:54 字数 329 阅读 794
编辑文章

在构建路由的时候,经常会为越来越多的页面引入而感到麻烦,出现如下图的情况,每次新增一个子页面,都需要引入一次,非常繁琐。

 
routes.js

在看Vue官方文档时,有看到自动化注册全局组件的方法

 

于是我就在想能不能像注册组件一样,用一个文件把所有的子页面给暴露出来呢?我查了很久,看了很多vue项目案例的源代码,发现大家好像都是一条一条引入的,子页面越多,import语句就越多。

根据组件的自动化注册代码,我修改了一下,实现了组件(子页面)的自动化引入

 

 
_index.js

通过检索文件所在目录的所有vue文件,获取到所有的组件信息,然后将组件对应组件名称放入pages对象,再讲pages对象暴露出去,于是在路由页面,只需要引入_index.js单个文件即可获取所有的组件

 

 

如此,就大功告成,以后不管新添加多少个子页面和路由,都不需要二次引入了,直接使用就行。

展开阅读全文
打赏
0
0 收藏
分享
加载中
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部