在软件开发过程中，“自动化”一词频繁出现。自动化测试、自动化数据映射和各种代码生成器。这些话的背后，也说明了在软件开发的过程中，对于那些重复的、千篇一律的东西。人们总是希望它自己来解放我们的双手。

“懒惰”是进步的动力

为什么自动路由

路由自动化是为了解决以下问题：

每次创建新页面时重复：在路由文件中添加相应的路由对象。路由和代码耦合：路由依赖于路由对象的硬编码。当某条路由发生变化时，需要修改相应的路由对象。当路由层次和路径改变时，整个路由对象数组甚至可能被重写。在路线间跳跃时的硬编码。目的很简单。在开发过程中，开发人员只需要做两件事：

要命名这个路由并在对应的目录中创建一个. vue文件，在开发过程中只需要完成这两个步骤，不需要关心路由对象怎么写。

对于小项目，你甚至可以忽略第一步。

自动路由规则

其中一些规则是针对开发人员的，另一些规则是针对程序的：

路由目录需要指定路由目录，每一层(一个文件夹就是一个层)必须有一个Layout.vue文件，用于渲染子路由。路由目录中的组件路径是它们对应的路由，例如指定了src/view文件夹，src/view/admin/users中对应的路由是localhost/admin/users。路由目录不区分大小写，统一转换为小写。这些是我们的自动路由规则。

定义

首先，提取三个概念：

自动路由的提供者是一个开放的接口，开发者只需要使用它。

视图是指视图组件的相关信息，如路径、名称等。

路由是指解析视图后对应的路由对象，用于生成vue-router的路由对象。

开始开发

由于代码太长，在这里把代码上传到Github，让感兴趣的童鞋可以看看。

在这里，我们只描述整个过程和关键部分的代码思路。

全拿走。通过require.context指定目录中的vue文件.通过前缀和排序操作，恢复到目录结构。解析恢复的目录结构。以及将解析的结构转换成路由对象。最关键的便利是将require.context获得的文件列表恢复到原始的树结构。

在被恢复到树结构之后，可以对应于树结构生成路由对象。

首先，根据文件的深度对文件列表进行排序，浅的深度第一，深的最后。

_ GetView(dir){ let view=[]；let keys=dir . keys()；for(键中的let index){ let path=key[index]；让组件=dir(路径)；view . push(view . create(path，component . default | | component))} view=view . sort((x，y)={ return x.Deep y.Deep？1 : -1;});返回视图；}根据排序列表恢复目录结构：

/* * *解析视图以生成相应的目录结构* @ private */_ generated directory(){ for(让索引在这里。_ views让view=this。_ view[index]；这个。_directory.addView(视图)；}}addView方法：

addView(view){ if(this . iscurrentdirectoryview(view)){ this。_ views.push(视图)；} else if(这个。_IsIn子目录(视图)){这。_addInSubDirectory(视图)；} else {让newSubDirectory=this。_createSubDirectory(视图)；newSubDirectory.addView(视图)；这个。_子目录. push(newSubDirectory)；}}目录恢复有三种可能：

该文件是当前目录下的文件。该文件是当前目录下的子目录文件。第一次恢复目录后，可以根据目录生成相应的路由对象。并且可以在生成的时候做一些定制的需求，比如开头提出的需求：

如果当前文件是Layout.vue，则默认为当前路由的根路由。如果当前文件是Index.vue，则默认为当前图层的空路径(直接渲染根路径条目)。用自动生成的路由对象替换router.js中的路由对象：

从“vue”导入Vue从“vue-router”导入Router从“导入生成器”。/RouterGenerator/generator '；使用路由器；let Generator=new Generator(require . context(')。/view '，true，/。vue $/))；导出默认的新路由器({ route :[generator . generate()]})目录结构如下：

效果如下：

Github地址：https://github.com/WhileKing/ea-router

国家预防机制地址：https://www.npmjs.com/package/ea-router

npm包的安装和使用：

Npm i ea-router以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。