# 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)

<a href="https://www.npmjs.com/package/vite-vue-route-generator">
    <img src="https://img.shields.io/badge/npm-1.2.4-brightgreen">
</a>

根据页面文件目录树，自动生成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
<template>
{{$route.params.pid}}
<!-- print 123 -->
{{$route.params.userName}}
<!-- print Foo -->
</template>
```

### 贡献

欢迎Issue。

```bash
pnpm install
pnpm run build
# or
npm i
npm run build
```

### License

MIT Copyright (C) 2022-PRESENT weiquanju