vite-plugin-generoutes 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,135 @@
|
|
|
1
|
-
# vite-plugin-generoutes
|
|
1
|
+
# vite-plugin-generoutes
|
|
2
|
+
|
|
3
|
+
A Vite plugin that generates routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
1. Install the plugin:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install vite-plugin-generoutes
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
2. Add the plugin to your `vite.config.js`:
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { defineConfig } from 'vite'
|
|
17
|
+
import generoutes from 'vite-plugin-generoutes'
|
|
18
|
+
|
|
19
|
+
export default defineConfig({
|
|
20
|
+
plugins: [
|
|
21
|
+
generoutes()
|
|
22
|
+
// ... other plugins
|
|
23
|
+
]
|
|
24
|
+
})
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
3. Create your page files(`index.vue` or `[...all].vue`) in the `src/pages` directory. Each file in this directory will be treated as a route.
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
src/routes/pages
|
|
31
|
+
├── index.vue
|
|
32
|
+
├── [...all].vue
|
|
33
|
+
├── user/
|
|
34
|
+
│ ├── index.vue
|
|
35
|
+
│ ├── [id]
|
|
36
|
+
│ │ └── index.vue
|
|
37
|
+
└── post
|
|
38
|
+
├── index.vue
|
|
39
|
+
└── [...all].vue
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
The above example will generate the routes file `src/router/generoutes/index.js` with the following content:
|
|
43
|
+
```js
|
|
44
|
+
export const routes = [
|
|
45
|
+
{
|
|
46
|
+
name: 'Index',
|
|
47
|
+
path: '/',
|
|
48
|
+
component: () => import('/src/pages/index.vue'),
|
|
49
|
+
meta: {
|
|
50
|
+
title: 'Index',
|
|
51
|
+
show: true,
|
|
52
|
+
keepAlive: false,
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
name: 'User',
|
|
57
|
+
path: '/user',
|
|
58
|
+
component: () => import('/src/pages/user/index.vue'),
|
|
59
|
+
meta: {
|
|
60
|
+
title: 'User',
|
|
61
|
+
show: true,
|
|
62
|
+
keepAlive: false,
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
name: 'User_[id]',
|
|
67
|
+
path: '/user/:id',
|
|
68
|
+
component: () => import('/src/pages/user/[id]/index.vue'),
|
|
69
|
+
meta: {
|
|
70
|
+
title: 'User_[id]',
|
|
71
|
+
show: true,
|
|
72
|
+
keepAlive: false,
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: 'User_Post',
|
|
77
|
+
path: '/user/post',
|
|
78
|
+
component: () => import('/src/pages/user/post/index.vue'),
|
|
79
|
+
meta: {
|
|
80
|
+
title: 'User_Post',
|
|
81
|
+
show: true,
|
|
82
|
+
keepAlive: false,
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
name: 'Index_[...all]',
|
|
87
|
+
path: '/:pathMatch(.*)*',
|
|
88
|
+
component: () => import('/src/pages/[...all].vue'),
|
|
89
|
+
meta: {
|
|
90
|
+
title: '404 Not Found',
|
|
91
|
+
show: true,
|
|
92
|
+
keepAlive: false,
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
name: 'User_Post_[...all]',
|
|
97
|
+
path: '/user/post/:pathMatch(.*)*',
|
|
98
|
+
component: () => import('/src/pages/user/post/[...all].vue'),
|
|
99
|
+
meta: {
|
|
100
|
+
title: 'User_Post_[...all]',
|
|
101
|
+
show: true,
|
|
102
|
+
keepAlive: false,
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
]
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
4. Import the generated routes and create a router instance:
|
|
109
|
+
|
|
110
|
+
```js
|
|
111
|
+
import { createRouter, createWebHashHistory } from 'vue-router'
|
|
112
|
+
import { routes } from './generoutes'
|
|
113
|
+
|
|
114
|
+
const router = createRouter({
|
|
115
|
+
history: createWebHashHistory(),
|
|
116
|
+
routes,
|
|
117
|
+
})
|
|
118
|
+
|
|
119
|
+
export default router
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Features
|
|
123
|
+
|
|
124
|
+
- Generate routes based on the file structure.
|
|
125
|
+
- Support dynamic routes.
|
|
126
|
+
- Support multiple NotFound routes.
|
|
127
|
+
- Support custom meta data for each route.
|
|
128
|
+
- Support ghost paths, For example, the (admin) folder will not be part of the route path, which is very useful for folder grouping.
|
|
129
|
+
- Support immediate update of the routes file when the file structure or defineOptions changes.
|
|
130
|
+
|
|
131
|
+
## Custom route info，including name and meta
|
|
132
|
+
|
|
133
|
+
You can define `name` and `meta` fields in the `defineOptions` of your `.vue` file, which will be used to override the default properties of the generated route. The `name` field will be used as the route name, which is very useful for `KeepAlive`. Any property in `defineOptions.meta` will be used as a property of the route `meta`, which makes the route metadata very flexible.
|
|
134
|
+
|
|
135
|
+
When you make any changes that may affect the route result, the `src/router/generoutes/index.js` file will be updated immediately, and the page will be refreshed without restarting the server.
|