# vite-vue-route-generator
**Repository Path**: anbine/vite-vue-route-generator
## Basic Information
- **Project Name**: vite-vue-route-generator
- **Description**: 根据页面文件目录树,自动生成Vue Route路由。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-08-05
- **Last Updated**: 2025-02-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: Vue, vue-router, Generator, 自动生成路由
## README
# vite-vue-route-generator
[English](./README.md)
根据页面文件目录树,自动生成Vue Route路由。
如果你觉得这个项目对你有帮助,请为我们[点亮 ⭐️ Star](https://github.com/weiquanju/vite-vue-route-generator)。
### 特性
- 🚀 根据页面文件目录树,自动生成路由配置。
- 🦾 根据文件名称,自动生成路由的 `name`,配合defineOptions更好的支持keep-alive。
- 📥 支持 `Vue` 和 `Vue TSX/JSX` 文件格式。
- 💡 支持路由路径动态参数。
### 开始
安装 `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
```
### 用法
```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;
```
##### 栗子
```text
./src/views/
├─index.vue
└─foo
├─ app.tsx
└─ index.vue
```
输出
```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