Vue自动化路由（基于Vue-Router）开篇

vue自动化路由

好久不见~ 若羽又开篇Vue的内容了。
年初的时候发布了第一版的ea-router自动化路由库，欢迎大家安装使用。［Github地址］ ［npm地址］

经历一年的使用。还是发现了不少问题和不足的地方，因此在前段时间抽空整理了所有需求并做了个规划。并发布了一个版本。下面来看看其中的原理和实现吧。

前言

因为之前都是写后端逻辑，因此接触前端后始终不太习惯js的原生语法。更偏向于es6的class写法，并且从ECMAScript后续的标准来看，官方也是比较推荐class的写法来更好的组织代码，并使其具有更强的表义性。哈哈，当然因为更熟悉后者，所以更偏袒一点。

功能需求

功能主要分为两部分：

• 路由自动化
• 服务于库的装饰器

路由自动化中，除了原有的自动生成外，还增加了另外两个在业务中会经常使用到的功能：

1. 设置缺省的Layout
2. 设置缺省的404页面

目录中的子目录关系，用路由中嵌套路由来进行表达，因此需要一个入口进行渲染，这就是Layout存在的一个意义，另外一层则是作为某个模块的通用布局存在。

装饰器主要用于补充路由相关特性，比如vue-router中的各种特性(命名路由，别名，params等等)，无缝的接入业务中。就像vue-property-decorators库一样。

原理

为了达成自动化路由的目的，本质就是要将路由对象按照某种特定的规则进行生成即可。那么参考后端MVC中的路由以及其他前端路由框架，将需要路由的页面按照目录的层次结构进行组织，然后对目录进行解析是比较通用并容易实现的。

1. 扫描目录文件
2. 还原目录结构
3. 转换为目录对象
4. 加载适配器（默认为vue-router的适配器）
5. 适配器将目录对象转换为routes
6. 使用routes

目录对象

将实际的目录结构映射成对象，下面看一个例子：

目录结构如下：

views
|-- About.vue
|-- Home.vue
|-- Layout.vue
|-- user
    |-- Add.vue

router/index.js代码如下：

// /src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import AutoRouteGenerator from "ea-router";
import defaultLayout from "../components/defaultLayout";
import notFoundPage from "../components/notFound";

Vue.use(VueRouter);
let generator = new AutoRouteGenerator(
  require.context("../views", true, /.vue$/)
);

generator.setDefaultLayout(defaultLayout);
generator.setNotFoundPage(notFoundPage);

const routes = generator.generate();
const router = new VueRouter({
  routes
});

export default router;

对应vue-router，自动生成的路由对象会是如下形式（里面的对象是自动生成的，导出语句不是喔，只是为了演示）：

const routes = [
  {
    path: "/",
    component: () => import("src/views/layout.vue"),

    children: [
      {
        path: "home/:id/:name",
        component: () => import("src/views/home.vue"),
        props: true
      },

      {
        path: "about",
        component: () => import("src/views/about.vue")
      },

      {
        path: "user",
        component: () => import("src/components/defaultLayout.vue"),

        children: [
          {
            path: "add",
            component: () => import("src/views/user/add.vue")
          }
        ]
      }
    ]
  },

  {
    path: "*",
    component: () => import("src/components/notFound.vue")
  }
];
export default routes;

因为使用的是webpack的require.context函数，但是它有一个缺陷就是扫描出来的并不是目录原来的层次结构。而是一维的结构，因此我们首先要还原原来的层次结构，并在此基础上封装、解析一些必要的信息。

适配器

适配者模式在这个场景下非常合适，输入是解析后的目录对象，而输出则是变化的。有可能是：

• vue-router的路由对象routes
• vue-router-next的路由对象routes
• 其他路由框架的路由对象
  想要适配其他框架， 则只需要实现对应的适配器并加载即可。

使用

目前有3个api以及5个装饰器

api:

• generate
• setDefaultLayout
• setNotFoundPage

decorators:

• @RouteName
• @Alias
• @Context
• @EnableProps
• @Meta

generate api

构造函数中传入通过require.context指定目录及过滤规则, 如下实例是指定views目录下所有.vue文件。

路由生成的api, 调用此方法将生成一个对应 路由适配器 生成的路由对象，目前默认内置的时基于vue 2.x的vue-router。

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";

Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /.vue$/))

export default new Router({
  routes: generator.generate()
})

那么在 main.js 中，我们不用改动原有的代码即可直接使用：

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

setDefaultLayout api

指定默认的Layout.vue，因为在大多数情况下，Layout.vue的内容可能都是下面这样：

<template>
    <router-view></router-view>
</template>

这种情况下，Layout.vue的目的仅仅是作为子路由的入口。那么我们可以直接利用setDefaultLayout来设置默认的Layout。

规则如下：

• 当当前目录中没有Layout.vue时，会尝试使用设置的默认Layout。
• 当没有Layout.vue并且没有设置默认Layout时，将会抛出异常。

实例：

// src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";
import DefaultLayout from './components/defaultLayout.vue';

Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /.vue$/))
generator.setDefaultLayout(DefaultLayout);

export default new Router({
  routes: generator.generate()
})

<!-- /src/components/defaultLayout.vue -->
<template>
    <router-view></router-view>
</template>

setNotFoundPage api

设置路由匹配失败时显示的页面。

实例：

// src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";
import NotFoundPage from './components/notFound.vue';

Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /.vue$/))
generator.setNotFoundPage(NotFoundPage);

export default new Router({
  routes: generator.generate()
})

<!-- /src/components/notFound.vue -->
<template>
    <div>
        嘿，页面走丢啦！    
    </div>
</template>

@RouteName(name: string) decorator

设置路由名称，在vue-router中对应了命名路由

import { Vue, Component } from 'vue-property-decorator';
import { RouteName } from 'ea-router';

@RouteName('YourComponentRouteName')
@Component
export default class YourComponent extends Vue {
}

等价于

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory', 
        name: 'YourComponentRouteName',
        component: YourComponent,
    }
  ]
})

Note that: path的生成规则是相对路径噢（根目录是构造函数中传入的目录，示例中也就是src/views）

@Alias(alias: string) decorator

设置路由别名，对应vue-router中的别名

import { Vue, Component } from 'vue-property-decorator';
import { Alias } from 'ea-router';

@Alias('YourComponentAlias')
@Component
export default class YourComponent extends Vue {
}

等价于

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory', 
        alias: 'YourComponentAlias',
        component: YourComponent,
    }
  ]
})

@Context(params: string[]) decorator

设置路由上下文，对应了vue-router中的$routes.params

会根据传入的顺序生成path。

import { Vue, Component } from 'vue-property-decorator';
import { Context } from 'ea-router';

@Context('id', 'type')
@Component
export default class YourComponent extends Vue {
}

等价于

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory/:id/:type',
        component: YourComponent,
    }
  ]
})

Note that: 如果同时使用 @Alias 和 @Context, 上下文的参数会自动添加在alias后面, 就像下面的例子:

import { Vue, Component } from 'vue-property-decorator';
import { Context, Alias } from 'ea-router';

@Alias('YourComponentAlias')
@Context('id', 'type')
@Component
export default class YourComponent extends Vue {
}

等价于

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory/:id/:type',
        alias:'YourComponentAlias/:id/:type',
        component: YourComponent,
    }
  ]
})

@EnableProps() decorator

开启路由参数的Boolean模式， 对应了vue-router中的路由传参-布尔模式

import { Vue, Component } from 'vue-property-decorator';
import { EnableProps } from 'ea-router';

@EnableProps()
@Component
export default class YourComponent extends Vue {
}

等价于

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory',
        props: true,
        component: YourComponent,
    }
  ]
})

Note that: 一般搭配 @Context 使用。

@Meta(meta: object) decorator

设置路由元信息，对应vue-router中的路由元信息

import { Vue, Component } from 'vue-property-decorator';
import { Meta } from 'ea-router';

@Meta({
    title: 'Component Title',
    requireAuthorize: true
})
@Component
export default class YourComponent extends Vue {
}

等价于

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory',
        component: YourComponent,
        meta: {
                  title: 'Component Title',
                  requireAuthorize: true
              },
    }
  ]
})

建议

在开发过程中，使用Class形式的写法是最为推荐的，表义性和组织性会更强一些。配合vue-property-decorators 食用更佳喔。好了，接下来说正经的：

1. 路由跳转，建议使用命名路由的跳转方式。去查看相关文档
2. 给路由命名，并统一定义路由的名称，便于管理（如，都定义在/src/domain/views.js中）。
3. 路由上下文使用Props进行传参。

计划

• 实现 vue-router-next 的适配器
• 实现路由文件的自动生成（基于模板语法）
• 添加可设置所有选项配置的装饰器
• 开放加载自定义适配器
• typescript支持
• 回补单元测试

总结

做这个库之前，也查找了很多相关资料。并且翻了不少类似库的源码进行学习，发现比较常见的做法：

1. 动态加载，即请求时去import 实现动态加载。但这个只是做了自动寻找路由，对于路由的组织还是没有比较好的解决。
2. webpack动态解析路径，通过正则表达式或者vue单文件组件解析器对文件进行解析，提取内容。这种方式非常接近本文中的方式，但是缺点也比较明显：不支持变量，如果全部硬编码到文件里，管理也是一个问题。

最后结合大家的经验，实现了这个库。下一步也会考虑开始实现生成路由文件，补充这一块的空白。

关于自动化路由这部分，将会从分析、实现、使用以及后续开发都会记录下来，并且会开源用了此库的一些个人项目，形成系列文章。这篇就当是起个头，如有不足，欢迎各位指正。

~另外欢迎大家使用并提出宝贵的意见哟