Vite+Vue3+VueRouter按文件动态导入路由失效求助

问题根源 #

你用import.meta.glob异步加载路由模块，但router初始化时，异步加载的路由还没被push到routes数组里——因为then回调是异步执行的，这时候createRouter已经用空数组完成初始化了，自然匹配不到任何路由。

解决方案 #

方案1：同步加载路由（适合开发/模块数量少的场景） #

改用import.meta.globEager同步加载所有路由模块，确保router初始化时routes数组已经填充完成：

修改主路由文件src/App/router/index.ts：

import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";

// 用globEager同步加载所有符合路径的路由模块
const importedRoutes = import.meta.globEager<{ default: RouteRecordRaw }>("@/**/router/index.ts");
const routes: RouteRecordRaw[] = [];

for (const modulePath in importedRoutes) {
  // 直接获取模块导出的路由对象
  const route = importedRoutes[modulePath].default;
  routes.push(route);
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

console.log(router.getRoutes());

export default router;

方案2：异步初始化router（适合生产环境懒加载） #

如果需要保持异步加载的特性，把router的创建改成异步函数，再在入口文件中异步挂载：

1. 修改主路由文件src/App/router/index.ts：

import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";

export async function createAppRouter() {
  const importedRoutes = import.meta.glob<{ default: RouteRecordRaw }>("@/**/router/index.ts", { import: 'default' });
  const routes: RouteRecordRaw[] = [];

  // 等待所有路由模块加载完成
  for (const modulePath in importedRoutes) {
    const routeModule = await importedRoutes[modulePath]();
    routes.push(routeModule.default);
  }

  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
  });

  console.log(router.getRoutes());
  return router;
}

2. 修改入口文件src/main.ts：

import { createApp } from 'vue'
import App from './App.vue'
import { createAppRouter } from './App/router/index.ts'

async function bootstrap() {
  const app = createApp(App);
  const router = await createAppRouter();
  app.use(router);
  app.mount('#app');
}

bootstrap();

额外优化：TypeScript类型规范 #

给模块路由加上明确的类型定义，避免any带来的类型隐患：

修改src/Dashboard/router/index.ts：

import DashboardView from "@/Dashboard/DashboardView.vue";
import type { RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw = {
  name: "dashboard",
  path: "/",
  component: DashboardView,
}

export default routes;

内容的提问来源于stack exchange，提问作者rolodex