README-ZH.md

vite-vue-route-generator

根据页面文件目录树，自动生成路由配置。

如果你觉得这个项目对你有帮助，请为我们点亮 ⭐️ Star。

依赖环境

• Vite@2.9.0

• Vue@3.0.0

• Vue-Router@4.0.0

特性

• 🚀 根据页面文件目录树，自动生成路由配置。

• 🦾 根据文件名称，自动生成路由的 name，配合defineOptions更好的支持keep-alive。

• 📥 支持 Vue 和 Vue TSX/JSX 文件格式。

• 💡 支持路由路径动态参数。

English

开始

安装 vite-vue-route-generator

# 选择一个你喜欢的包管理工具
npm install vite-vue-route-generator --save
# or
yarn add vite-vue-route-generator
# or
pnpm install vite-vue-route-generator

用法

目录树

src/views/目录结构示例：

├─index.vue
└─foo
    ├─ app.tsx
	└─ index.vue

生成路由

// 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;

生成结果

// 根据上面目录生成的路由配置如下：
[
	{
		"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 页面中参数值示例：

<template>
{{$route.params.pid}}
<!-- print 123 -->
{{$route.params.userName}}
<!-- print Foo -->
</template>

贡献

欢迎Issue。

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

License

MIT Copyright (c) 2022-PRESENT weiquanju