界面

schoolNewsWeb/src/utils/route-generator.ts

@@ -23,6 +23,10 @@ const LAYOUT_MAP: Record<string, () => Promise<any>> = {
   'BlankLayout': () => import('@/layouts/BlankLayout.vue'),
   // 页面布局
   'PageLayout': () => import('@/layouts/PageLayout.vue'),
+  // 路由占位组件（用于没有组件的子路由）
+  'RoutePlaceholder': () => import('@/layouts/RoutePlaceholder.vue'),
+  // 用户中心布局（有共用区域，避免重复查询）
+  'UserCenterLayout': () => import('@/views/user/user-center/UserCenterLayout.vue'),
 };
 
 /**
@@ -122,10 +126,20 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
   const layout = isTopLevel ? (menu as any).layout : null;
   const hasChildren = menu.children && menu.children.length > 0;
   
+  // 检查 component 是否是布局组件（优先检查 LAYOUT_MAP，再检查名称）
+  const isComponentLayout = menu.component && (
+    LAYOUT_MAP[menu.component] || 
+    (typeof menu.component === 'string' && menu.component.includes('Layout'))
+  );
+  
   // 确定路由组件
   if (layout && LAYOUT_MAP[layout]) {
     // 如果指定了布局，使用指定的布局
     route.component = getComponent(layout);
+  } else if (isComponentLayout && hasChildren && isTopLevel && menu.component) {
+    // 如果 component 是布局组件且有子菜单，使用该布局组件作为父路由组件
+    // 这样可以确保布局只渲染一次，共用区域的数据也只查询一次
+    route.component = getComponent(menu.component);
   } else if (hasChildren && isTopLevel) {
     // 如果有子菜单但没有指定布局，根据菜单类型选择默认布局
     if (menu.type === MenuType.NAVIGATION) {
@@ -141,8 +155,8 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
     if (menu.component) {
       route.component = getComponent(menu.component);
     } else {
-      // 非顶层菜单没有组件时，使用简单的占位组件
-      route.component = getComponent('BlankLayout');
+      // 非顶层菜单没有组件时，使用路由占位组件（不影响布局样式）
+      route.component = getComponent('RoutePlaceholder');
     }
   }
   
@@ -173,7 +187,8 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
     });
 
     // 当前菜单指定了页面组件时，即使存在子菜单也应当渲染该页面
-    if (menu.component) {
+    // 但如果 component 是布局组件，则不应该创建 path: '' 的子路由（因为布局组件已经是父路由的组件了）
+    if (menu.component && !isComponentLayout) {
       route.children!.push({
         path: '',
         name: `${menu.menuID}_page`,