怎么在vue中利用require.context动态注册路由

今天就跟大家聊聊有关怎么在vue中利用require.context动态注册路由,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

需求场景:

在日常的功能练习和调试过程中,需要一个演示项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥。基于此出发点,考虑能否自动读取文件夹下的文件进行路由注册。

借鉴思路:

参考vue的功能基础组件的自动化全局注册,看到一个require.context方法,可以读取某个文件夹下的文件信息,因此考虑,使用这个方法,获取视图文件夹下的.vue页面,文件夹名称作为路由名称

require.context的使用介绍:

一个webpack的api,通过执行。上下文函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用进口导入模块

页面代码:

如下图示,看法文件夹下的内容,都需要进行路由注册。

文件的路径有2种,(1)简单的vue功能页面,直接挂在视图文件夹下;(2)复杂的页面,在视图下在新建文件夹进行处理。

目前需要自动注册的路由页面,是针对“直接挂在视图文件夹”下的页面。(因为视图下的二级页面,暂时没有想到好的方案)

路由器/index.js页面代码

心路历程:

(1)一开始的想法,是想着用数组对象的方式定义好,路由名称和引入的路径地址,但是觉得还是不够自动化,新建.vue文件的时候还是需要手动添加;

(2)后来想到用使用。上下文方法得到文件名,然后根据字符串裁减和拼接,得到我所需的url和文件相对路径;

例如:,组件:()=祝辞进口(【变量】),但是后来发现,进口()里的面,不能使用变量! ! ! ! ! ! ! ! !

原因:根据es6module语法,由于进口是静态执行,所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构。

(3)由由于进口的使用限制,不能动态使用()=祝辞的导入语法,因此在考虑,能否直接替换掉这种异步加载引入的写法。经过分析,得出pathConfig字段里面有一个属性的内容,是指定的vue页面默认的模块内容。经测试,可以使用。

pathConfig的打印内容如下示:

(4)因此“视图”文件夹下的“.vue"文件,引入成功,并用变量routerAry存储起来,使用concat方法把其他需要手动注册的路由信息,连接起来,进行路由注册。