fix: activate the tab label correctly

src/layout/component/Tabs.vue

@@ -7,6 +7,7 @@ import {
   h,
   inject,
   nextTick,
+  onBeforeUnmount,
   onMounted,
   reactive,
   ref,
@@ -18,6 +19,7 @@ import { VueDraggable } from 'vue-draggable-plus'
 
 import { ButtonAnimation } from '@/components'
 import { tabsInjectionKey } from '@/injection'
+import router from '@/router'
 import { useConfigureStore } from '@/stores/configure'
 import { useTabsStore } from '@/stores/tabs'
 
@@ -67,6 +69,8 @@ const tabPinnedList = ref<Tab[]>([])
 
 const tabList = ref<Tab[]>([])
 
+const pendingActiveKey = ref(tabActiveKey.value)
+
 const isMounted = ref(false)
 
 const tabBackgroundTransitionClasses = reactive({
@@ -276,6 +280,10 @@ function scrollToActiveTab() {
   })
 }
 
+const routerAfterEach = router.afterEach(() => {
+  pendingActiveKey.value = tabActiveKey.value
+})
+
 watch(
   (): [Tab[], string] => [tabs.value, tabActiveKey.value],
   ([newTabs, newActive], [oldTabs, oldActive]) => {
@@ -310,6 +318,10 @@ watchEffect(() => {
 onMounted(() => {
   isMounted.value = true
 })
+
+onBeforeUnmount(() => {
+  routerAfterEach()
+})
 </script>
 <template>
   <div
@@ -323,7 +335,7 @@ onMounted(() => {
         :class="[
           isTabDragging ? 'cursor-move' : 'cursor-pointer',
           {
-            'tab-active bg-primary/6': tab.key === tabActiveKey,
+            'tab-active bg-primary/6': tab.key === pendingActiveKey,
           },
         ]"
         @click="handleTabClick(tab.key)"
@@ -337,7 +349,7 @@ onMounted(() => {
           @after-enter="scrollToActiveTab"
         >
           <div
-            v-if="tab.key === tabActiveKey && isMounted"
+            v-if="tab.key === pendingActiveKey && isMounted"
             class="absolute inset-0 z-0 size-full border-t-[1.5px] border-primary bg-primary/6"
           />
         </Transition>
@@ -382,7 +394,7 @@ onMounted(() => {
             :class="[
               isTabDragging ? 'cursor-move' : 'cursor-pointer',
               {
-                'tab-active': tab.key === tabActiveKey,
+                'tab-active': tab.key === pendingActiveKey,
                 group: !tab.locked && !configureStore.configure.showTabClose,
               },
             ]"
@@ -397,7 +409,7 @@ onMounted(() => {
               @after-enter="scrollToActiveTab"
             >
               <div
-                v-if="tab.key === tabActiveKey && isMounted"
+                v-if="tab.key === pendingActiveKey && isMounted"
                 class="absolute inset-0 z-0 size-full border-t-[1.5px] border-primary bg-primary/6"
               />
             </Transition>

src/layout/main/index.vue

@@ -28,8 +28,6 @@ const { configure } = storeToRefs(configureStore)
 
 const { create, setActive } = tabsStore
 
-const isNavigating = ref(false)
-
 const transitionName = ref('scale')
 
 const isMounted = ref(false)
@@ -42,7 +40,7 @@ function createTab(route: RouteLocationNormalizedLoaded) {
     componentName,
     icon = 'iconify ph--browser',
     label: defaultLabel = '未命名标签',
-    renderTabLabel
+    renderTabLabel,
   } = route.meta
 
   const { fullPath, name, params } = route
@@ -59,16 +57,6 @@ function createTab(route: RouteLocationNormalizedLoaded) {
   })
 }
 
-router.beforeEach((_, __, next) => {
-  isNavigating.value = true
-  next()
-})
-
-router.afterEach(() => {
-  isNavigating.value = false
-})
-
-
 watch(
   (): [Tab[], string] => [tabs.value, tabActiveKey.value],
   ([newTabs, newActiveKey], [, oldActiveKey]) => {
@@ -116,12 +104,8 @@ watch(
 )
 
 watch(
-  (): [RouteLocationNormalizedLoaded, boolean] => [router.currentRoute.value, isNavigating.value],
-  ([newRoute, isNavigating], oldValue) => {
-    if (isNavigating) return
-
-    const oldRoute = oldValue?.[0]
-
+  () => router.currentRoute.value,
+  (newRoute, oldRoute) => {
     if (newRoute.fullPath !== oldRoute?.fullPath) {
       const { showTab, enableMultiTab } = newRoute.meta
       const findTab = tabs.value.find((item) =>
@@ -139,11 +123,10 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 )
 
 onMounted(() => {
-
   oldTabs = [...tabs.value]
 
   isMounted.value = true