在vite中搭建动态路由

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; // 拿到原始的path
  path = path.replace("../views", "").replace("/page.js", "");
  path = path || "/";
  // 将原始的path种的page.js替换为index.vue
  const 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;