vue-cli-plugin-autorouter

借鉴 Nuxt.js 的路由源码实现。可以根据存放Vue-Router页面的文件夹结构自动生成Vue-Router配置文件。

相信我，你会中毒的，妈妈再也不用担心我手动低效的去Ctrl + C，Ctrl + V了，一切交给插件自动生成路由配置文件，我们要做的就是按照规则维护好文件夹结构，世界突然美妙了。

注意：这个插件目前为止还没有改成通用的插件包，有这个考虑。不过现阶段主要用于 Vue3template 这个脚手架项目。后面还会考虑再开发一个脚手架项目的cli命令行工具，实现类似Vue-cli通过命令进行项目的初始化等功能。

1：安装（Vue3template默认已安装配置好，可直接使用）

注意这是一个基于Vue-cli 3.0也就是 vue-cli-service 开发的插件，不支持老版本Vue 2.0的脚手架哦，请注意了！

1vue add vue-cli-plugin-autorouter

add安装的时候会自动向你项目的package.json的devDependencies注入下面依赖：

1"glob": "^7.1.3",
2"pify": "^4.0.1"

这是 vue-cli-service插件开发Generator自动注入的，也是本插件需要使用到的依赖。请勿随意删除。

2：配置

在vue.config.js中你可以增加pluginOptions配置节点，实现对插件的自定义化需求定制：

1module.exports = {
2  // ...
3  pluginOptions: {
4    route: {
5     // 默认：page。存放Vue路由页面的文件夹名称
6     TemplateFolderName: 'page',
7     // 默认：./src/application。从src/开始到TemplateFolderName文件夹父一级文件夹相对路径              
8     RootFolderName: './src/application',  
9     // 默认 src/core/config/route.config.ts。生成的配置文件保存路径，相对插件的位置来。
10     SaveConfigPath: '../../../src/core/config/route.config.ts' 
11    }
12  },
13  // ...
14}

然后你就可以很爽的直接使用命令，注意这个命令是用来自动生成配置文件的：

1vue-cli-service route

注意：每次项目新增页面后，请重新执行此命令用以生成新的路由配置文件！！

不过，推荐在项目的package.json中做如下配置：

1"scripts": {
2    "serve": "npm run route && vue-cli-service serve",
3    "route": "vue-cli-service route",
4    "build": "vue-cli-service build",
5  },

注意：一定要在 vue-cli-service serve命令运行前，先跑vue-cli-service route来扫描src/application/page的文件结构进而自动生成Vue-Router的配置文件。默认配置文件保存在：src/core/config/route.config.ts中。

3：卸载

东西再好，总有些开发者拒绝学习，或者拒绝尝试新的东西，喜欢固守自己已熟知的技术栈，那么下面提供卸载Vue3template自带的 vue-cli-plugin-autorouter教程。

3.1: 删除依赖（两种方式）

• 1: 使用npm命令卸载依赖：

1npm uninstall --save glob pify vue-cli-plugin-autorouter

• 2: 从package.json中手动删除下面依赖信息

1 "glob": "^7.1.3",
2 "pify": "^4.0.1",
3 "vue-cli-plugin-autorouter": "^1.1.8",

然后删除项目node_modules，在重新npm i。

3.2: vue.config.js

从vue.config.js中你删除pluginOptions配置节点。

3.3: 修改源码

1: 从src/core/config中删除文件route.config.ts。

2：然后修改：index.config.ts，去除：import { AutoRoutesConfig } from './route.config';

3：之后修改：RouterConfigUrl中的routes对象，routes对象的内容需要你自己手动

注意：RouterConfigUrl 中的 routes 需要你自己手动配置了，这里提供一份配置参考：

1 public static RouterConfigUrl: RouterOptions = {
2    mode: 'hash',
3    routes: [
4      {
5        name: "user",
6        path: "/user",
7        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
8        meta: {}
9      },
10      {
11        name: "user-one",
12        path: "/user/one",
13        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
14        meta: {}
15      },
16      {
17        name: "index",
18        path: "/",
19        component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
20        meta: {}
21      }
22    ]
23  }

【新增功能】4：路由meta配置

在page/文件夹的组件中使用可以直接使用自定义标签<route-meta></route-meta>来实现对路由meta的直接配置，插件会提取<route-meta></route-meta>中的代码直接注入到生成的路由配置文件中。下面请看使用案例：

1<route-meta>
2  {
3    "isLogin": false,
4    "title": "首页"
5  }
6</route-meta>
7<template lang="pug">
8  .home
9    h2 测试标题
10</template>

注意这里route-meta标签中填的必须是一个JSON对象，注意书写格式，不能有误！！

那么自动生成的路由配置如下：

1{
2    name: "index",
3    path: "/",
4    component: () => import(/* webpackChunkName: 'index' */ '@/page/index.vue'),
5    meta: {
6      isLogin: false,
7      title: "首页"
8    }
9}

5：使用

这里使用请注意文件夹结构，多看几次下面的例子加强理解，以便能够更好的组织自己的路由结构！！

5.1: 基础路由

基础路由很简单，直接在page/文件下新建vue组件即可，插件会根据文件结构自动生成路由配置文件！！

假设 page 的目录结构如下：

1pages/
2--| user/
3-----| index.vue
4-----| one.vue
5--| index.vue

那么自动生成的路由配置如下：

1[
2  {
3    name: "user",
4    path: "/user",
5    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
6    meta: {}
7  },
8  {
9    name: "user-one",
10    path: "/user/one",
11    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
12    meta: {}
13  },
14  {
15    name: "index",
16    path: "/",
17    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
18    meta: {}
19  }
20]

5.2: 动态路由（带参数）

如果路由需要参数，那么可以按照命名的规则：_参数名.vue，在user/文件夹创建Vue组件。例如这里的：_id.vue，其实这里的 _id.vue就相当于我们平时开发时用的user_info.vue组件。

假设 page 的目录结构如下：

1page/
2--| user/
3-----| _id.vue
4--| index.vue

那么自动生成的路由配置如下：

1[
2  {
3    name: "user-id",
4    path: "/user/:id?",
5    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
6    meta: {}
7  },
8  {
9    name: "index",
10    path: "/",
11    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
12    meta: {}
13  }
14]

---

这里我们有了user-id组件（相当于 user_info.vue），那么user首页组件如何添加？其实很简单!

基于上面的文件结构在user/里面在创建一个index.vue组件即可，默认文件夹下面的index.vue作为路由的首页

改变后的文件结构如下：

1page/
2--| user/
3-----| _id.vue   # 这个相当于平时开发的 user_info.vue，个人中心的详情页面
4-----| index.vue # user首页，类似个人中心
5--| index.vue

那么自动生成的路由配置如下：

1[
2  {
3    name: "user",
4    path: "/user",
5    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
6    meta: {}
7  },
8  {
9    name: "user-id",
10    path: "/user/:id",
11    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
12    meta: {}
13  },
14  {
15    name: "index",
16    path: "/",
17    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
18    meta: {}
19  }
20]

5.3: 嵌套路由

创建内嵌子路由，上面我们已经有了user/文件夹，那么我们可以在user/文件夹同级目录创建一个名字一样的Vue组件，这里添加：user.vue!

假设 page 的目录结构如下：

1page/
2--| user/
3-----| _id.vue
4-----| index.vue
5--| user.vue
6--| index.vue

那么自动生成的路由配置如下：

1[
2  {
3    path: "/user",
4    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user.vue'),
5    meta: {},
6    children: [
7      {
8        name: "user",
9        path: "",
10        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
11        meta: {}
12      },
13      {
14        name: "user-id",
15        path: ":id",
16        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
17        meta: {}
18      }
19    ]
20  },
21  {
22    name: "index",
23    path: "/",
24    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
25    meta: {}
26  }
27]

记住：这是嵌套路由所以别忘记在user.vue组件中添加：router-view 来展示子路由的页面。