1.在每一个views文件夹中创建page.js配置文件，作为路由的meta选项配置

// page.js
export default {title: "首页",// ...
};

2.在router中使用import.meta.glob加载所有的路由模块

import { createRouter, createWebHistory } from "vue-router";// 寻找views文件号中所有的page.js
const pages = import.meta.glob("../views/**/page.js", {eager: true, // 渴望得到更多的数据import: "default", // 希望得到default中的数据
});
// 加载所有的页面模块
const pageComps = import.meta.glob("../views/**/index.vue");
const routes = Object.entries(pages).map(([path, meta]) => {const pageJsPath = path; // 拿到原始的pathpath = path.replace("../views", "").replace("/page.js", "");path = path || "/";// 将原始的path种的page.js替换为index.vueconst compsPath = pageJsPath.replace("page.js", "index.vue");const name = path.split("/").filter(Boolean).join("-") || "index"; // 去掉空字符串// 映射为一个路由配置对象return {path,name,component: pageComps[compsPath],meta,children: [],};
});
// 选出layout布局路由组件
const newRoutes = routes.find((item) => item.name === "index");
// 选出除了布局组件以外其他的组件
const filterRoutes = routes.filter((item) => item.name !== "index");
// 将其他的路由组件作为layout组件的子组件
filterRoutes.forEach((item) => {newRoutes.children.push(item);
});const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [newRoutes],
});// 在路由跳转前设置页面标题
router.beforeEach((to, from, next) => {document.title = to.meta.title; // 设置页面标题next();
});export default router;