# 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 ``` ### 贡献 欢迎Issue。 ```bash pnpm install pnpm run build # or npm i npm run build ``` ### License MIT Copyright (C) 2022-PRESENT weiquanju