vue-cli-plugin-tsx-autorouter

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的脚手架哦，请注意了！

vue add vue-cli-plugin-autorouter

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

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

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

2：配置

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

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

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

vue-cli-service route

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

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

"scripts": {
    "serve": "npm run route && vue-cli-service serve",
    "route": "vue-cli-service route",
    "build": "vue-cli-service build",
  },

注意：一定要在 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命令卸载依赖：

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

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

 "glob": "^7.1.3",
 "pify": "^4.0.1",
 "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 需要你自己手动配置了，这里提供一份配置参考：

 public static RouterConfigUrl: RouterOptions = {
    mode: 'hash',
    routes: [
      {
        name: "user",
        path: "/user",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
        meta: {}
      },
      {
        name: "user-one",
        path: "/user/one",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
        meta: {}
      },
      {
        name: "index",
        path: "/",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
        meta: {}
      }
    ]
  }

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

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

<route-meta>
  {
    "isLogin": false,
    "title": "首页"
  }
</route-meta>
<template lang="pug">
  .home
    h2 测试标题
</template>

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

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

{
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: 'index' */ '@/page/index.vue'),
    meta: {
      isLogin: false,
      title: "首页"
    }
}

5：使用

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

5.1: 基础路由

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

假设 page 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

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

[
  {
    name: "user",
    path: "/user",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
    meta: {}
  },
  {
    name: "user-one",
    path: "/user/one",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
    meta: {}
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

5.2: 动态路由（带参数）

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

假设 page 的目录结构如下：

page/
--| user/
-----| _id.vue
--| index.vue

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

[
  {
    name: "user-id",
    path: "/user/:id?",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
    meta: {}
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

---

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

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

改变后的文件结构如下：

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

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

[
  {
    name: "user",
    path: "/user",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
    meta: {}
  },
  {
    name: "user-id",
    path: "/user/:id",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
    meta: {}
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

5.3: 嵌套路由

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

假设 page 的目录结构如下：

page/
--| user/
-----| _id.vue
-----| index.vue
--| user.vue
--| index.vue

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

[
  {
    path: "/user",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user.vue'),
    meta: {},
    children: [
      {
        name: "user",
        path: "",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
        meta: {}
      },
      {
        name: "user-id",
        path: ":id",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
        meta: {}
      }
    ]
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

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