Vue中怎么实现自动化路由，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
为什么要自动化路由
路由自动化在于解决以下的问题：
每次新建页面时的重复操作：在路由文件中添加对应的路由对象。
路由与代码耦合：路由依赖于路由对象的硬编码，当某一路由发生变动时，势必需要修改对应的路由对象。当路由层级、路径发生改变时，甚至可能面临的是整个路由对象数组的重写。
路由之间进行跳转时的硬编码。
目的很简单，在开发过程中，开发者仅需要做两件事即可：
为这个路由命名
在对应的目录下创建
.vue文件
开发过程中只需要做这两步，无需再去关心路由对象如何编写。
甚至可以忽略第一步，对于小型项目而言。
自动化路由规则
这些规则一部分是给开发者看，另一部分是给程序看的：
路由目录需要指定
路由目录下，每一层（一个文件夹即为一层） 必须 要有一个
Layout.vue文件，用来渲染子路由。路由目录下的组件路径即为其对应的路由，比如指定了
src/views文件夹，里面的src/views/admin/users对应的路由即是：localhost/admin/users。路由目录下不区分大小写，统一转换成小写处理。
以上便是我们制定的自动化路由规则。
定义
先提取出三个概念：
自动化路由的提供者，它就是 对外 开放的接口，开发者只需要使用它就可以。
视图，指的是一个视图组件的相关信息，比如路径、名称等等。
路由，指的是解析视图之后对应的路由对象，用于生成 vue-router 的路由对象。
开始开发
由于代码过长，这里将代码上传至 Github , 有兴趣的童鞋可以去看看。
这里只描述一下整体流程以及关键部分的代码思路。
先通过
require.context获取到指定目录下的所有.vue文件。通过前缀以及排序操作，将其还原成目录结构。
通过还原的目录结构，进行解析。
将解析后的结构转换成路由对象。
其中最关键的地方便是通过 require.context 获取到的文件列表还原成原来的树形结构。
还原成树形结构之后就可以对应树形结构进行路由对象的生成了。
首先将文件列表进行排序，根据文件的深度进行排序，深度浅的在前，深的在后。
_getViews(dir) {
let views = [];
let keys = dir.keys();
for (let index in keys) {
let path = keys[index];
let component = dir(path);
views.push(View.create(path, component.default || component))
}
views = views.sort((x, y) => { return x.Deep > y.Deep ? 1 : -1; });
return views;
}根据排序后的列表对目录结构进行还原：
_generateDirectory() {
for (let index in this._views) {
let view = this._views[index];
this._directory.addView(view);
}
}addView 方法：
addView(view) {
if(this.isCurrentDirectoryView(view)) {
this._views.push(view);
} else if(this._isInSubDirectory(view)) {
this._addInSubDirectory(view);
} else {
let newSubDirectory = this._createSubDirectory(view);
newSubDirectory.addView(view);
this._subDirectory.push(newSubDirectory);
}
}对于目录还原时有三种可能：
这个文件就是当前目录下的文件
这个文件是当前目录下已有子目录的文件
这个文件是当前目录下子目录的文件，且为首次出现
将目录还原后，就可以根据目录生成对应的路由对象。并且在生成时可以做一些定制化的需求，比如开篇提出来的需求：
如果当前文件是
Layout.vue，即默认为当前路由的根路由如果当前文件是
Index.vue， 即默认为当前层的空路由（根路由入口直接渲染）
使用方法，将 router.js 中的路由对象替换成自动生成的即可：
import Vue from 'vue'
import Router from 'vue-router'
import Generator from './routerGenerator/generator';
Vue.use(Router);
let generator = new Generator(require.context('./views', true, /\.vue$/));
export default new Router({
routes: [generator.generate()]
})目录结构如下：
效果如下：
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。
