大部分Vue项目使用路由都是在src/router/index.ts中增加routes的配置,如下图
我们可以看到routes的配置重复的代码非常多,且当我们项目页面开始变多时,routes里的元素也会越来越多。
自动生成路由
当我们在页面目录下新建页面文件时,自动帮我们完成routes的配置。
src下新建views目录(项目的页面)
每个页面有个page.ts文件用去设置页面的meta属性
typescript
// page.ts
export default {
title: "登录页面",
};
自动生成路由逻辑
在src/router/index.ts中书写逻辑
typescript
import { createRouter, createWebHistory } from "vue-router";
// 读取views下的page.ts文件
const pages = import.meta.glob("../views/**/page.ts", {
eager: true,
import: "default",
});
// 读取views下的index.vue文件
const pageComponents = import.meta.glob("../views/**/index.vue");
const routes = Object.entries(pages).map(([pagePath, meta]) => {
const path = pagePath.replace("../views", "").replace("/page.ts", "") || "/";
const name = path.split("/").filter(Boolean).join("-") || "index";
const component = pagePath.replace("page.ts", "index.vue");
return {
name,
path,
component: pageComponents[component],
meta,
};
});
const router = createRouter({
routes,
history: createWebHistory(),
});
export default router;
总结
生成的routes结构符合路由配置,并且也大大减少了我们手动增加代码的工作量。