first commit

src/router/index.js

@@ -0,0 +1,198 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import { convertMenusToRoutes } from "./dynamicRoutes";
+
+// 静态路由：登录页独立，404 页面独立
+const staticRoutes = [
+  {
+    path: "/login",
+    name: "Login",
+    component: () => import("@/views/login/index.vue"),
+    meta: { requiresAuth: false }
+  },
+  {
+    path: "/",
+    name: "Main",
+    component: () => import("@/views/Main.vue"),
+    redirect: "/dashboard",
+    children: [
+      {
+        path: "dashboard",
+        name: "Dashboard",
+        component: () => import("@/views/dashboard/index.vue"),
+        meta: {
+          requiresAuth: true,
+          title: "仪表盘",
+          icon: "fa-solid fa-gauge",
+          id: 1,
+          isStatic: true
+        }
+      }
+    ],
+    meta: { requiresAuth: true }
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
+    component: () => import("@/views/404/404.vue"),
+    meta: { requiresAuth: false }
+  }
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: staticRoutes
+});
+
+let dynamicRoutesAdded = false;
+let dynamicRoutesData = [];
+let routesLoadingPromise = null;
+
+export function resetDynamicRoutes() {
+  dynamicRoutesAdded = false;
+  routesLoadingPromise = null;
+}
+
+export async function loadAndAddDynamicRoutes() {
+  if (routesLoadingPromise) {
+    return routesLoadingPromise;
+  }
+  
+  if (dynamicRoutesAdded) {
+    return Promise.resolve();
+  }
+  
+  routesLoadingPromise = (async () => {
+    try {
+      const { useMenuStore } = await import("@/stores/menu");
+      const menuStore = useMenuStore();
+      const menuData = await menuStore.fetchMenus();
+      
+      if (menuData && menuData.length > 0) {
+        addDynamicRoutes(menuData);
+        dynamicRoutesAdded = true;
+        routesLoadingPromise = null;
+        return Promise.resolve();
+      } else {
+        dynamicRoutesAdded = true;
+        routesLoadingPromise = null;
+        return Promise.resolve();
+      }
+    } catch (error) {
+      console.error('加载动态路由失败:', error);
+      dynamicRoutesAdded = true;
+      routesLoadingPromise = null;
+      return Promise.resolve();
+    }
+  })();
+  
+  return routesLoadingPromise;
+}
+
+// 核心修改：移除扁平化，直接使用嵌套菜单生成路由
+function addDynamicRoutes(menus) {
+  if (!menus?.length) {
+    return;
+  }
+
+  // 直接转换嵌套菜单为嵌套路由（不再扁平化）
+  const dynamicRoutes = convertMenusToRoutes(menus);
+
+  if (router.hasRoute('Main')) {
+    router.removeRoute('Main');
+  }
+
+  // 重新添加主路由
+  router.addRoute({
+    path: "/",
+    name: "Main",
+    component: () => import("@/views/Main.vue"),
+    redirect: "/dashboard",
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: "dashboard",
+        name: "Dashboard",
+        component: () => import("@/views/dashboard/index.vue"),
+        meta: {
+          requiresAuth: true,
+          title: "仪表盘",
+          icon: "fa-solid fa-gauge",
+          id: 1,
+          isStatic: true
+        }
+      },
+      ...dynamicRoutes // 嵌套路由直接加入 children
+    ]
+  });
+
+  dynamicRoutesAdded = true;
+  // console.log('动态路由添加完成:', router.getRoutes().map(r => r.path));
+}
+
+function findRouteByName(routes, routeName) {
+  for (const route of routes) {
+    if (route.name === routeName) {
+      return route;
+    }
+    if (route.children) {
+      const found = findRouteByName(route.children, routeName);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+
+function findFirstValidRoute(routes) {
+  for (const route of routes) {
+    if (route.component) {
+      return route;
+    }
+    if (route.children && route.children.length > 0) {
+      const childRoute = findFirstValidRoute(route.children);
+      if (childRoute) {
+        return childRoute;
+      }
+    }
+  }
+  return null;
+}
+
+router.beforeEach(async (to, from, next) => {
+  const token = localStorage.getItem("token");
+  
+  if (to.path === "/login") {
+    if (token) {
+      if (!dynamicRoutesAdded) {
+        await loadAndAddDynamicRoutes();
+      }
+      next({ path: "/" });
+    } else {
+      next();
+    }
+    return;
+  }
+  
+  if (!token) {
+    next({ path: "/login", query: { redirect: to.path } });
+    return;
+  }
+  
+  if (!dynamicRoutesAdded) {
+    await loadAndAddDynamicRoutes();
+    // 路由加载后重新导航，确保路由匹配正确
+    next({ path: to.path, replace: true });
+    return;
+  }
+  
+  // 如果匹配不到路由，跳转到404
+  if (to.matched.length === 0) {
+    next({ name: "NotFound" });
+    return;
+  }
+  
+  next();
+});
+
+export default router;