1.需求描述

在编写vue项目时，我们通常必须在每次添加新页面时添加新的路线。因此，我们将在项目中有一个特殊的文件夹来管理路线，如下图所示

那么，当我们在文件夹中创建新的vue文件时，有没有一种方案可以自动为我们添加路由呢？尤其是在我们的一个ERP后台项目中，几乎所有人在一个文件夹下都有很多子文件，子文件一般包括index.vue、detail.vue、edit.vue，以及对应的事件列表页、详细页、编辑页。

上图是我们的文件目录，其中所有的页面都存储在views文件夹中，goodsPlanning是一级目录，onNewComplete和thirdGoods是二级目录，特定的页面存储在二级目录中，indexComponents是index.vue的文件，editComponents也是如此。index.vue对应的路由为/good glaning/onnecomplete，edit.vue对应的路由为/good glaning/onnecomplete/edit。细节也是如此。因此，我们的文件夹和路线可以完全对应，只要知道路线，就可以快速找到对应的文件。那么有没有办法读取我们二级目录中的所有文件，然后根据文件名生成路由呢？答案是肯定的

2.require.context的引入。

官方文件要求上下文

简单地说：使用require.context，我们可以获取指定文件夹中的所有文件

require.context(目录，use子目录=false，regExp=/^.//);require.context有三个参数：

目录：指示要检索的目录use子目录：是否检索子目录regExp:匹配文件的正则表达式require.context()的返回值，有一个keys方法，返回一个数组。

让路由器=require.context('VIEWS '，true)。keys()console.log(路由器)

通过上面的代码，我们打印出所有视图文件夹下的所有文件和文件夹，只要我们定期编写，就可以找到我们需要的文件

3.直接编码

从“视图/布局/索引”/* * *常规匹配项导入布局。/first，然后是一级目录、不带组件的二级目录和以结尾的三级目录。vue */let routers=require . context(' view '，true，/。/[a-z] /。组件)[a-z] /[a-z] 。vue $/I)。keys()让indexoutmap={ }//用于存储以index.vue结尾的文件，因为index.vue是一个列表文件，需要添加到layout(我们的菜单)和keepAlive中。需要权限判断。let detailroutererr=[]//用于存储以非index.vue结尾的vue文件，目前不需要这个类。layoutroutes . foreach(item={ const path=item . match(/[a-za-z]/g))//path存储一个目录，一个辅助目录，文件名const routerChild={//定义路由对象path : path[1]，名称3360 ` $ { path[0]} $ { _。upper first(path[1]))} `，//upperfirst，Lodash初始大写方法组件(resolve) {require ([`././view $ { item。slice (1)} `]，resolve)}，} if (/index 。vue $/。test(item)){//确定是否使用索引。vue end if(indexroutermap[path[0]]){//判断主路由是否存在，是否有推送次路由。如果不存在，请创建一个新的index outmap[path[0]]. children . push(router child)} else { index outmap[path[0]]={ path : '/' path[0]，component3360Layout。children :[router child]} } } else {//如果不以index.vue结尾，则直接添加到route detailroutererr . push({ path : item . slice(1，-4)，//第一个也是最后一个。vu ename : ` $ { path[0]} $ { _。upperfirst(路径[1])} $ {_。upperfirst(路径[2]))} `，component(resolve) { require([`././view $ { item . slice(1)} `]，resolve) }，meta: { noCache: true，//不要保持活动noVerify: true //不要验证权限}})}})导出默认值[.object . values(indexoutermap)，detailrouterarr，/** *仅仪表板*/{Path: ' '，组件：布局，重定向： '仪表板'，子组件： [{Path3360 '仪表板'，组件： ()=导入('视图/仪表板/索引')，名称： '仪表板'，元： {title : '主页'，nocache 3360 true，no verify : true}}]，]所有路径都是通过几个简单的实现的

4.专心

不能使用导入来引入路由，因为在导入不支持的变量时不能使用别名。搜索了很久，知道使用变量的时候不能用别名，所以我用相对路径。5.利益

你不用加路线，我就不说这个了。明眼人都能看出来你知道路线，一个人就能找到对应的文件。我们的团队以前出现过，乱涂路径的情况可以更好的控制验证和keepAlive总结

以上是边肖介绍的vue自动路由实现代码，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！