326 lines
8.8 KiB
Markdown
326 lines
8.8 KiB
Markdown
## 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/`文件夹的组件中使用可以直接使用自定义标签`<route-meta></route-meta>`来实现对路由`meta`的直接配置，插件会提取`<route-meta></route-meta>`中的代码直接注入到生成的路由配置文件中。下面请看使用案例：
|
||
|
||
```vue
|
||
<route-meta>
|
||
{
|
||
"isLogin": false,
|
||
"title": "首页"
|
||
}
|
||
</route-meta>
|
||
<template lang="pug">
|
||
.home
|
||
h2 测试标题
|
||
</template>
|
||
```
|
||
|
||
**注意这里`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` 来展示子路由的页面。 |