优化动态菜单实现：尽量保持原路由配置项及菜单项的判断

src/api/hook-demo/use-dynamic-route.ts

@@ -12,10 +12,14 @@ export interface MenuMeta {
   title: string
   /** 菜单图标 */
   icon?: string
+  /** 隐藏菜单 */
+  hidden?: boolean
   /** 菜单总是可见 */
   alwaysShow?: boolean
   /** 菜单是否可用 */
   roles?: string[]
+  /** 其它参数 */
+  [key: string]: any
 }
 
 /** 菜单详情 */
@@ -26,6 +30,10 @@ export interface MenuItem {
   type: MenuType
   /** 菜单路径 */
   path: string
+  /** 重定向页面 */
+  redirect?: string
+  /** 组件页面 */
+  component?: string
   /** 菜单元数据 */
   meta: MenuMeta
   /** 子菜单 */
@@ -40,6 +48,7 @@ export interface MenuItem {
 const dynamicRoutes: MenuItem[] = [
   {
     path: "/permission",
+    redirect: "/permission/page",
     name: "Permission",
     type: MenuType.Menu,
     meta: {
@@ -51,6 +60,7 @@ const dynamicRoutes: MenuItem[] = [
     children: [
       {
         path: "page",
+        component: "/views/permission/page.vue",
         name: "PagePermission",
         type: MenuType.Page,
         meta: {
@@ -60,6 +70,7 @@ const dynamicRoutes: MenuItem[] = [
       },
       {
         path: "directive",
+        component: "/views/permission/directive.vue",
         name: "DirectivePermission",
         type: MenuType.Page,
         meta: {

src/store/modules/permission.ts

@@ -28,16 +28,16 @@ const filterDynamicRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
   return res
 }
 
-function transformMenuToRoute(menuItem: MenuItem, rootItem: boolean, parentPath: string = ""): RouteRecordRaw {
+function transformMenuToRoute(menuItem: MenuItem): RouteRecordRaw {
   const childrenRoute: RouteRecordRaw[] = []
-  const vuePath = "/src/views" + parentPath + "/" + menuItem.path + ".vue"
-  const vuePage = rootItem ? Layouts : modules[vuePath]
+  const vuePath = "/src" + (menuItem.component ?? "")
+  const vuePage = menuItem.type == MenuType.Menu ? Layouts : modules[vuePath]
 
   // 如果有 children，则需要递归添加 children 到 route
   if (menuItem.children && menuItem.children.length > 0) {
     for (let i = 0; i < menuItem.children.length; i++) {
       if (menuItem.children[i].type == MenuType.Page) {
-        childrenRoute.push(transformMenuToRoute(menuItem.children[i], false, menuItem.path))
+        childrenRoute.push(transformMenuToRoute(menuItem.children[i]))
       }
     }
   }
@@ -47,13 +47,16 @@ function transformMenuToRoute(menuItem: MenuItem, rootItem: boolean, parentPath:
     name: menuItem.name,
     component: vuePage,
     meta: {
-      title: menuItem.meta.title,
       svgIcon: menuItem.meta?.icon,
-      roles: menuItem.meta?.roles
+      ...menuItem.meta
     },
     children: childrenRoute.length > 0 ? childrenRoute : undefined
   }
 
+  if (menuItem.redirect) {
+    routeItem.redirect = menuItem.redirect
+  }
+
   return routeItem
 }
 
@@ -67,7 +70,7 @@ export const usePermissionStore = defineStore("permission", () => {
   const setRoutes = (roles: string[], menus: MenuItem[]) => {
     const menuRoute: RouteRecordRaw[] = []
     for (let i = 0; i < menus.length; i++) {
-      menuRoute.push(transformMenuToRoute(menus[i], true))
+      menuRoute.push(transformMenuToRoute(menus[i]))
     }
 
     const accessedRoutes = filterDynamicRoutes(menuRoute, roles)