目录结构

代码

page.js

export default {
  title: "立方体",
};

router.js配置

import { createRouter, createWebHashHistory } from "vue-router";
// 获取所有page.js的设置
const pages = import.meta.glob("../pages/**/page.js", {
  eager: true,
  import: "default",
});
// 获取所有vue文件，用于vite动态导入
const compModules = import.meta.glob("../pages/**/index.vue");
const _routes = Object.entries(pages).map(([pagePath, config]) => {
  const path = pagePath.replace("../pages", "").replace("/page.js", "");
  const vue = pagePath.replace("page.js", "index.vue");
  return {
    path,
    name: path.replace("/", ""),
    component: compModules[vue],
    meta: config,
  };
});
_routes.unshift({
  path: "/",
  name: "index",
  component: () => import("../pages/index.vue"),
});

export const routes = _routes;

export const router = createRouter({
  history: createWebHashHistory(),
  routes: _routes,
});

首页vue

<template>
  <section>
    <ul style="margin: 66px;">
      <li v-for="(i, index) in routes" :key="index">
        <router-link :to="{path: i.path}">{{ i?.meta?.title || '主页' }}</router-link>
      </li>
    </ul>
  </section>
</template>

<script setup>
import { routes } from "../router/index";
/* ---变量--- */
console.log(routes);
/* ---方法--- */
</script>

<style scoped></style>

效果