diff --git a/src/api/hook-demo/use-dynamic-route.ts b/src/api/hook-demo/use-dynamic-route.ts index 5f956cca..559d7790 100644 --- a/src/api/hook-demo/use-dynamic-route.ts +++ b/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: { diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index e012fc4e..2f58ecaa 100644 --- a/src/store/modules/permission.ts +++ b/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)