feat(projects): 多级路由的所有子路由转换成二级路由

src/layouts/Layout/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="h-full">
+    <h3>Layout</h3>
     <router-view v-slot="{ Component }">
       <transition name="fade-slide" mode="out-in" appear>
         <component :is="Component" v-if="app.reloadFlag" />

src/router/routes/index.ts

@@ -1,9 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
-import { transformAuthRouteToVueRoute } from '@/utils';
+import { transformAuthRoutesToVueRoutes } from '@/utils';
 import constantRoutes from './constant';
 
 /** 所有路由 */
-export const routes: RouteRecordRaw[] = constantRoutes.map(item => transformAuthRouteToVueRoute(item));
+export const routes: RouteRecordRaw[] = transformAuthRoutesToVueRoutes(constantRoutes);
 
 /** 路由名称 */
 export const routeName = (key: AuthRoute.RouteKey) => key;

src/store/modules/route/index.ts

@@ -4,7 +4,7 @@ import type { Router } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useBoolean } from '@/hooks';
 import { fetchUserRoutes } from '@/service';
-import { transformAuthRouteToMenu, transformAuthRouteToVueRoute } from '@/utils';
+import { transformAuthRouteToMenu, transformAuthRoutesToVueRoutes } from '@/utils';
 import type { GlobalMenuOption } from '@/interface';
 
 /** 路由状态 */
@@ -37,7 +37,7 @@ export const useRouteStore = defineStore('route-store', () => {
     if (data) {
       getMenus(data.routes);
 
-      const vueRoutes = data.routes.map(route => transformAuthRouteToVueRoute(route));
+      const vueRoutes = transformAuthRoutesToVueRoutes(data.routes);
       vueRoutes.forEach(route => {
         router.addRoute(route);
       });

src/typings/common/route.d.ts

@@ -59,6 +59,8 @@ declare namespace AuthRoute {
     hide?: boolean;
     /** 路由顺序，可用于菜单的排序 */
     order?: number;
+    /** 表示是否是多级路由的中间级路由(用于转换路由数据时筛选多级路由的标识，定义路由时不用填写) */
+    multi?: boolean;
   };
 
   /** 单个路由的类型结构(后端返回此类型结构的路由) */

src/utils/router/helpers.ts

@@ -7,8 +7,21 @@ type ComponentAction = {
   [key in AuthRoute.RouteComponent]: () => void;
 };
 
-/** 将权限路由类型转换成vue路由类型 */
-export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
+/**
+ * 将权限路由转换成vue路由
+ * @param routes - 权限路由
+ */
+export function transformAuthRoutesToVueRoutes(routes: AuthRoute.Route[]) {
+  return routes.map(route => transformAuthRouteToVueRoute(route)).flat(1);
+}
+
+/**
+ * 将单个权限路由转换成vue路由
+ * @param route - 权限路由
+ */
+function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
+  const resultRoute: RouteRecordRaw[] = [];
+
   const itemRoute = { ...item } as RouteRecordRaw;
 
   if (hasDynamicPath(item)) {
@@ -29,7 +42,8 @@ export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
       multi() {
         // 多级路由一定有子路由
         if (hasChildren(item)) {
-          Object.assign(itemRoute, { component: Layout });
+          Object.assign(itemRoute, { meta: { ...itemRoute.meta, multi: true } });
+          delete itemRoute.component;
         } else {
           consoleError('多级路由缺少子路由: ', item);
         }
@@ -74,16 +88,32 @@ export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
         children: [itemRoute]
       };
 
-      return parentRoute;
+      return [parentRoute];
     }
   }
 
   if (hasChildren(item)) {
-    itemRoute.redirect = item.children![0].path;
-    itemRoute.children = item.children!.map(child => transformAuthRouteToVueRoute(child));
+    const children = item.children!.map(child => transformAuthRouteToVueRoute(child)).flat();
+
+    // 找出第一个不为多级路由中间级的子路由路径作为重定向路径
+    const redirectPath: AuthRoute.RoutePath = (children.find(item => !item.meta?.multi)?.path ||
+      '/') as AuthRoute.RoutePath;
+    if (redirectPath === '/') {
+      consoleError('该多级路由没有有效的子路径', item);
     }
 
-  return itemRoute;
+    if (item.component === 'multi') {
+      // 多级路由，将子路由提取出来变成同级
+      resultRoute.push(...children);
+      delete itemRoute.children;
+    } else {
+      itemRoute.children = children;
+    }
+    itemRoute.redirect = redirectPath;
+  }
+  resultRoute.push(itemRoute);
+
+  return resultRoute;
 }
 
 function hasComponent(item: AuthRoute.Route) {