如何用require.context实现Vue动态注册路由的？

本文共计933个文字，预计阅读时间需要4分钟。

需求场景：在日常的功能练习和调试过程中，需要有一个demo项目进行功能测试。由于频繁的.vue页面同时更新，还需在router.js文件中注册路由，感觉有点繁琐和繁琐。基于此，考虑以下改进点：

需求场景：

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

借鉴思路：

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

require.context的使用介绍：

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

页面代码：

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

文件的路径有2种，（1）简单的vue功能页面，直接挂在views文件夹下；（2）复杂的页面，在views下在新建文件夹进行处理。

目前需要自动注册的路由页面，是针对“直接挂在views文件夹”下的页面。