## vue-cli-plugin-autorouter 借鉴 [Nuxt.js](https://zh.nuxtjs.org/) 的路由源码实现。可以根据存放Vue-Router页面的文件夹结构自动生成Vue-Router配置文件。 **相信我，你会中毒的，妈妈再也不用担心我手动低效的去`Ctrl + C`，`Ctrl + V`了，一切交给插件自动生成路由配置文件，我们要做的就是按照规则维护好文件夹结构，世界突然美妙了。** > 注意：这个插件目前为止还没有改成通用的插件包，有这个考虑。不过现阶段主要用于 [Vue3template](https://github.com/helpcode/Vue3template) 这个脚手架项目。后面还会考虑再开发一个脚手架项目的`cli`命令行工具，实现类似`Vue-cli`通过命令进行项目的初始化等功能。 ## 1：安装（Vue3template默认已安装配置好，可直接使用） 注意这是一个基于[Vue-cli 3.0](https://cli.vuejs.org/zh/)也就是 vue-cli-service 开发的插件，不支持老版本Vue 2.0的脚手架哦，请注意了！ ```bash vue add vue-cli-plugin-autorouter ``` `add`安装的时候会自动向你项目的`package.json`的`devDependencies`注入下面依赖： ```txt "glob": "^7.1.3", "pify": "^4.0.1" ``` 这是 `vue-cli-service`插件开发`Generator`自动注入的，也是本插件需要使用到的依赖。请勿随意删除。 ## 2：配置 在`vue.config.js`中你可以增加`pluginOptions`配置节点，实现对插件的自定义化需求定制： ```js 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' } }, // ... } ``` **然后你就可以很爽的直接使用命令，注意这个命令是用来自动生成配置文件的：** ```bash vue-cli-service route ``` > 注意：每次项目新增页面后，请重新执行此命令用以生成新的路由配置文件！！ 不过，推荐在项目的`package.json`中做如下配置： ```txt "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命令卸载依赖： ```bash npm uninstall --save glob pify vue-cli-plugin-autorouter ``` - 2: 从`package.json`中手动删除下面依赖信息 ```text "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` 需要你自己手动配置了，这里提供一份配置参考： ```typescript 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/`文件夹的组件中使用可以直接使用自定义标签``来实现对路由`meta`的直接配置，插件会提取``中的代码直接注入到生成的路由配置文件中。下面请看使用案例： ```vue { "isLogin": false, "title": "首页" } ``` **注意这里`route-meta`标签中填的必须是一个`JSON`对象，注意书写格式，不能有误！！** 那么自动生成的路由配置如下： ```js { name: "index", path: "/", component: () => import(/* webpackChunkName: 'index' */ '@/page/index.vue'), meta: { isLogin: false, title: "首页" } } ``` ## 5：使用 这里使用请注意文件夹结构，多看几次下面的例子加强理解，以便能够更好的组织自己的路由结构！！ ### 5.1: 基础路由 基础路由很简单，直接在`page/`文件下新建`vue`组件即可，插件会根据文件结构自动生成路由配置文件！！ 假设 page 的目录结构如下： ```txt pages/ --| user/ -----| index.vue -----| one.vue --| index.vue ``` 那么自动生成的路由配置如下： ```js [ { 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 的目录结构如下： ```txt page/ --| user/ -----| _id.vue --| index.vue ``` 那么自动生成的路由配置如下： ```js [ { 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`作为路由的首页 改变后的文件结构如下： ```txt page/ --| user/ -----| _id.vue # 这个相当于平时开发的 user_info.vue，个人中心的详情页面 -----| index.vue # user首页，类似个人中心 --| index.vue ``` 那么自动生成的路由配置如下： ```js [ { 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 的目录结构如下： ```txt page/ --| user/ -----| _id.vue -----| index.vue --| user.vue --| index.vue ``` 那么自动生成的路由配置如下： ```js [ { 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` 来展示子路由的页面。