优化

src/app/components/AdminSidebarMenu.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useRouter, type NavigationFailure } from 'vue-router'
+import type { MenuInstance } from 'element-plus'
 import type { AdminNavigationNode } from '@/core/navigation/adminNavigation'
 import AdminSidebarMenuNode from './AdminSidebarMenuNode.vue'
 
@@ -8,6 +10,8 @@ const props = defineProps<{
   activePath: string
   collapsed: boolean
 }>()
+const router = useRouter()
+const menuRef = ref<MenuInstance>()
 
 function getGroupKeys(nodes: AdminNavigationNode[]): string[] {
   return nodes.flatMap((node) => node.children?.length
@@ -18,16 +22,36 @@ function getGroupKeys(nodes: AdminNavigationNode[]): string[] {
 const groupKeys = computed(() => getGroupKeys(props.items))
 const defaultOpeneds: string[] = []
 const menuInstanceKey = computed(() => `${props.collapsed ? 'collapsed' : 'expanded'}:${groupKeys.value.join('|')}`)
+
+async function restoreActivePath() {
+  await nextTick()
+  menuRef.value?.updateActiveIndex(props.activePath)
+}
+
+async function navigate(path: string) {
+  if (!path.startsWith('/') || path === props.activePath) return
+  let failure: NavigationFailure | void
+  try {
+    failure = await router.push(path)
+  } catch {
+    await restoreActivePath()
+    return
+  }
+  if (failure) await restoreActivePath()
+}
+
+watch(() => props.activePath, restoreActivePath)
 </script>
 
 <template>
   <el-menu
+    ref="menuRef"
     :key="menuInstanceKey"
     class="side-nav-menu"
     :default-active="activePath"
     :collapse="collapsed"
     :default-openeds="defaultOpeneds"
-    router
+    @select="navigate"
   >
     <AdminSidebarMenuNode v-for="item in items" :key="item.key" :node="item" :level="0" />
   </el-menu>