Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weiquanju/vite-vue-route-generator
Automatically generate Vue routing configuration based on file path.
https://github.com/weiquanju/vite-vue-route-generator
generator router vite vue vue-router
Last synced: about 12 hours ago
JSON representation
Automatically generate Vue routing configuration based on file path.
- Host: GitHub
- URL: https://github.com/weiquanju/vite-vue-route-generator
- Owner: weiquanju
- Created: 2022-05-12T03:54:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-25T03:01:59.000Z (23 days ago)
- Last Synced: 2024-12-25T14:32:29.612Z (23 days ago)
- Topics: generator, router, vite, vue, vue-router
- Language: TypeScript
- Homepage: https://github.com/weiquanju/v-route-generate
- Size: 104 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-ZH.md
Awesome Lists containing this project
README
# vite-vue-route-generator
根据页面文件目录树，自动生成路由配置。
如果你觉得这个项目对你有帮助，请为我们[点亮 ⭐️ Star](https://github.com/weiquanju/vite-vue-route-generator)。
依赖环境
### 特性
- 🚀 根据页面文件目录树，自动生成路由配置。
- 🦾 根据文件名称，自动生成路由的 `name`，配合defineOptions更好的支持keep-alive。
- 📥 支持 `Vue` 和 `Vue TSX/JSX` 文件格式。
- 💡 支持路由路径动态参数。
[English](./README.md)
### 开始
安装 `vite-vue-route-generator`
```bash
# 选择一个你喜欢的包管理工具
npm install vite-vue-route-generator --save
# or
yarn add vite-vue-route-generator
# or
pnpm install vite-vue-route-generator
```
### 用法
##### 目录树
`src/views/`目录结构示例：
```text
├─index.vue
└─foo
├─ app.tsx
└─ index.vue
```
##### 生成路由
```ts
// file: src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import { getRoutes } from "vite-vue-route-generator";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
// 使用glob，获取页面视图目录下所有文件
routes: getRoutes(import.meta.glob("../views/**/**.vue"), {
pathRoot: "../views/", //必填。目录树的根路径，使用相对路径，`/`结尾
debugger: true,//用于测试，打印路由
}),
});
export default router;
```
生成结果
```ts
// 根据上面目录生成的路由配置如下：
[
{
"path": "/foo",
"children": [
{
"name": "FooApp",
"path": "app",
"component": ()=>import('../views/foo/app.tsx')
},
{
"name": "FooIndex",
"path": "",
"component": ()=>import('../views/foo/index.vue')
}
]
},
{
"name": "Index",
"path": "/",
"component": ()=>import('../views/index.vue')
}
]
```
##### 命名规则
- 主页名称（**强制**）：`HomeView` or `Index.uve`, `index`，任选其一则可。
- 404 页面名称（**强制**）: `404` or `notfound`, `NotFound`，任选其一则可。
##### 支持文件格式
- `.vue`
- `.tsx`
- `.jsx`
##### 路由路径动态参数
- **参数示例**
`src/views/User/list-[pid]-[userName].vue` (项目中的文件)
→ `/User/list-:pid-:userName` (实际生成的 vue route `path`参数)
→ `/User/list-456-Foo` (浏览器中访问路径)
Vue 页面中参数值示例：
```vue
{{$route.params.pid}}
{{$route.params.userName}}
```
### 贡献
欢迎Issue。
```bash
pnpm install
pnpm run build
# or
npm i
npm run build
```
### License
MIT Copyright (c) 2022-PRESENT weiquanju