浅入深出Vue：自动化路由

在软件开发的过程当中，"自动化"这个词出现的频率是比较高的。自动化测试，自动化数据映射以及各式的代码生成器。这些词语的背后，也说明了在软件开发的过程当中，对于那些重复、千篇一概的事情。人们老是想让它本身完成，来解放咱们的双手。

“懒惰”是进步的动力

为何要自动化路由

路由自动化在于解决如下的问题：

• 每次新建页面时的重复操做：在路由文件中添加对应的路由对象。

• 路由与代码耦合：路由依赖于路由对象的硬编码，当某一路由发生变更时，势必须要修改对应的路由对象。当路由层级、路径发生改变时，甚至可能面临的是整个路由对象数组的重写。

• 路由之间进行跳转时的硬编码。

目的很简单，在开发过程当中，开发者仅须要作两件事便可：

1. 为这个路由命名

2. 在对应的目录下建立 .vue 文件

开发过程当中只须要作这两步，无需再去关心路由对象如何编写。

甚至能够忽略第一步，对于小型项目而言。

自动化路由规则

这些规则一部分是给开发者看，另外一部分是给程序看的：

1. 路由目录须要指定

2. 路由目录下，每一层（一个文件夹即为一层）必须要有一个 Layout.vue文件，用来渲染子路由。

3. 路由目录下的组件路径即为其对应的路由，好比指定了 src/views文件夹，里面的 src/views/admin/users 对应的路由便是： localhost/admin/users。

4. 路由目录下不区分大小写，统一转换成小写处理。

以上即是咱们制定的自动化路由规则。

定义

先提取出三个概念：

自动化路由的提供者，它就是对外开放的接口，开发者只须要使用它就能够。

视图，指的是一个视图组件的相关信息，好比路径、名称等等。

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

开始开发

因为代码过长，这里将代码上传至 Github, 有兴趣的童鞋能够去看看。
这里只描述一下总体流程以及关键部分的代码思路。

1. 先经过 require.context 获取到指定目录下的全部 .vue 文件。

2. 经过前缀以及排序操做，将其还原成目录结构。

3. 经过还原的目录结构，进行解析。

4. 将解析后的结构转换成路由对象。

其中最关键的地方即是经过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;
}

根据排序后的列表对目录结构进行还原：

/**
 * 解析views,生成对应的目录结构
 * @private
 */
_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()]
})

目录结构以下：

效果以下：

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

npm地址：https://www.npmjs.com/package/ea-router

npm包安装使用：

npm i ea-router