refactor:优化后台菜单唯一标识的生成规则

build-admin · build-admin · commit df31070cb229 · 2025-01-24T23:45:46.000+08:00
diff --git a/web/src/layouts/backend/components/menus/menuHorizontal.vue b/web/src/layouts/backend/components/menus/menuHorizontal.vue
@@ -14,14 +14,15 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, reactive } from 'vue'
+import { onBeforeRouteUpdate, useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
 import Logo from '/@/layouts/backend/components/logo.vue'
 import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
-import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
+import NavMenus from '/@/layouts/backend/components/navMenus.vue'
 import { useConfig } from '/@/stores/config'
 import { useNavTabs } from '/@/stores/navTabs'
-import NavMenus from '/@/layouts/backend/components/navMenus.vue'
 import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
 import horizontalScroll from '/@/utils/horizontalScroll'
+import { getMenuKey } from '/@/utils/router'
 
 const config = useConfig()
 const navTabs = useNavTabs()
@@ -35,10 +36,10 @@ const state = reactive({
  * 激活当前路由对应的菜单
  */
 const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
     const tabView = navTabs.getTabsViewDataByRoute(currentRoute)
     if (tabView) {
-        // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
-        state.defaultActive = tabView.meta!.matched as string
+        state.defaultActive = getMenuKey(tabView, tabView.meta!.matched as string)
     }
 }
 
diff --git a/web/src/layouts/backend/components/menus/menuTree.vue b/web/src/layouts/backend/components/menus/menuTree.vue
@@ -1,7 +1,7 @@
 <template>
     <template v-for="menu in props.menus">
         <template v-if="menu.children && menu.children.length > 0">
-            <el-sub-menu @click="onClickSubMenu(menu)" :index="menu.path" :key="menu.path">
+            <el-sub-menu @click="onClickSubMenu(menu)" :index="getMenuKey(menu)" :key="getMenuKey(menu)">
                 <template #title>
                     <Icon :color="config.getColorVal('menuColor')" :name="menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon" />
                     <span>{{ menu.meta?.title ? menu.meta?.title : $t('noTitle') }}</span>
@@ -10,19 +10,20 @@
             </el-sub-menu>
         </template>
         <template v-else>
-            <el-menu-item :index="menu.path" :key="menu.path" @click="onClickMenu(menu)">
+            <el-menu-item @click="onClickMenu(menu)" :index="getMenuKey(menu)" :key="getMenuKey(menu)">
                 <Icon :color="config.getColorVal('menuColor')" :name="menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon" />
                 <span>{{ menu.meta?.title ? menu.meta?.title : $t('noTitle') }}</span>
             </el-menu-item>
         </template>
     </template>
 </template>
+
 <script setup lang="ts">
-import { useConfig } from '/@/stores/config'
-import type { RouteRecordRaw } from 'vue-router'
-import { getFirstRoute, onClickMenu } from '/@/utils/router'
 import { ElNotification } from 'element-plus'
 import { useI18n } from 'vue-i18n'
+import type { RouteRecordRaw } from 'vue-router'
+import { useConfig } from '/@/stores/config'
+import { getFirstRoute, getMenuKey, onClickMenu } from '/@/utils/router'
 
 const { t } = useI18n()
 const config = useConfig()
diff --git a/web/src/layouts/backend/components/menus/menuVertical.vue b/web/src/layouts/backend/components/menus/menuVertical.vue
@@ -15,11 +15,12 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive } from 'vue'
+import { onBeforeRouteUpdate, useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
 import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
-import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
-import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
 import { useConfig } from '/@/stores/config'
 import { useNavTabs } from '/@/stores/navTabs'
+import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
+import { getMenuKey } from '/@/utils/router'
 
 const config = useConfig()
 const navTabs = useNavTabs()
@@ -45,10 +46,10 @@ const verticalMenusScrollbarHeight = computed(() => {
  * 激活当前路由对应的菜单
  */
 const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
     const tabView = navTabs.getTabsViewDataByRoute(currentRoute)
     if (tabView) {
-        // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
-        state.defaultActive = tabView.meta!.matched as string
+        state.defaultActive = getMenuKey(tabView, tabView.meta!.matched as string)
     }
 }
 
diff --git a/web/src/layouts/backend/components/menus/menuVerticalChildren.vue b/web/src/layouts/backend/components/menus/menuVerticalChildren.vue
@@ -22,6 +22,7 @@ import { useConfig } from '/@/stores/config'
 import { useNavTabs } from '/@/stores/navTabs'
 import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
 import horizontalScroll from '/@/utils/horizontalScroll'
+import { getMenuKey } from '/@/utils/router'
 
 const config = useConfig()
 const navTabs = useNavTabs()
@@ -51,10 +52,10 @@ const verticalMenusScrollbarHeight = computed(() => {
  * 激活当前路由的菜单
  */
 const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
     const tabView = navTabs.getTabsViewDataByRoute(currentRoute)
     if (tabView) {
-        // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
-        state.defaultActive = tabView.meta!.matched as string
+        state.defaultActive = getMenuKey(tabView, tabView.meta!.matched as string)
     }
 
     let routeChildren = navTabs.getTabsViewDataByRoute(currentRoute, 'above')
diff --git a/web/src/layouts/backend/components/navBar/double.vue b/web/src/layouts/backend/components/navBar/double.vue
@@ -17,6 +17,7 @@ import NavMenus from '/@/layouts/backend/components/navMenus.vue'
 import { useConfig } from '/@/stores/config'
 import { useNavTabs } from '/@/stores/navTabs'
 import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
+import { getMenuKey } from '/@/utils/router'
 
 const config = useConfig()
 const navTabs = useNavTabs()
@@ -30,10 +31,10 @@ const state = reactive({
  * 激活当前路由的菜单
  */
 const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
     const tabView = navTabs.getTabsViewDataByRoute(currentRoute)
     if (tabView) {
-        // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
-        state.defaultActive = tabView.meta!.matched as string
+        state.defaultActive = getMenuKey(tabView, tabView.meta!.matched as string)
     }
 }
 
diff --git a/web/src/utils/router.ts b/web/src/utils/router.ts
@@ -1,17 +1,17 @@
-import router from '/@/router/index'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
-import type { RouteRecordRaw, RouteLocationRaw } from 'vue-router'
 import { ElNotification } from 'element-plus'
+import { compact, isEmpty, reverse } from 'lodash-es'
+import type { RouteLocationRaw, RouteRecordRaw } from 'vue-router'
+import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { i18n } from '/@/lang/index'
+import router from '/@/router/index'
+import adminBaseRoute from '/@/router/static/adminBase'
+import memberCenterBaseRoute from '/@/router/static/memberCenterBase'
 import { useConfig } from '/@/stores/config'
+import { useMemberCenter } from '/@/stores/memberCenter'
 import { useNavTabs } from '/@/stores/navTabs'
 import { useSiteConfig } from '/@/stores/siteConfig'
-import { useMemberCenter } from '/@/stores/memberCenter'
-import { closeShade } from '/@/utils/pageShade'
-import adminBaseRoute from '/@/router/static/adminBase'
-import memberCenterBaseRoute from '/@/router/static/memberCenterBase'
-import { i18n } from '/@/lang/index'
 import { isAdminApp } from '/@/utils/common'
-import { compact, isEmpty, reverse } from 'lodash-es'
+import { closeShade } from '/@/utils/pageShade'
 
 /**
  * 导航失败有错误消息的路由push
@@ -146,6 +146,18 @@ export const getMenuPaths = (menus: RouteRecordRaw[]): string[] => {
     return menuPaths
 }
 
+/**
+ * 获取菜单唯一标识
+ * @param menu 菜单数据
+ * @param prefix 前缀
+ */
+export const getMenuKey = (menu: RouteRecordRaw, prefix = '') => {
+    if (prefix === '') {
+        prefix = menu.path
+    }
+    return `${prefix}-${menu.name as string}-${menu.meta && menu.meta.id ? menu.meta.id : ''}`
+}
+
 /**
  * 会员中心和后台的菜单处理
  */
