feat: 标签页优化

Author: allen

src/@types/store.d.ts

@@ -1,7 +1,7 @@
 declare namespace App {
   interface Tab {
     title: string
-    name: string
+    fullPath: string
   }
 }
 

src/components/layout/Header.vue

@@ -21,16 +21,16 @@ const breadcrumbArr = computed(() => {
 
 // 切换tabs
 function tabClick(val: number | string = 0, delay = true) {
-  let name: any
+  let fullPath: any
   if (typeof val === 'number') {
-    name = tabs.value[val].name
+    fullPath = tabs.value[val].fullPath
   } else {
-    name = val
+    fullPath = val
   }
   setTimeout(
     () => {
       router.push({
-        name,
+        fullPath,
       })
     },
     delay ? 200 : 0,
@@ -42,19 +42,19 @@ const visible = ref(false)
 const top = ref(0)
 const left = ref(0)
 let clickName = ''
-function rightClick(e: { x: number; y: number }, name: string) {
-  clickName = name
+function rightClick(e: { x: number; y: number }, fullPath: string) {
+  clickName = fullPath
   left.value = e.x + 5
   top.value = e.y + 5
   visible.value = true
 }
 function closeMenu() {
   visible.value = false
 }
-function tabRemove(name: string = clickName) {
-  const index = tabs.value.findIndex((i: App.Tab) => i.name === name)
-  removeTab(name)
-  if (route.name === name) {
+function tabRemove(fullPath: string = clickName) {
+  const index = tabs.value.findIndex((i: App.Tab) => i.fullPath === fullPath)
+  removeTab(fullPath)
+  if (route.fullPath === fullPath) {
     const nextTabIndex = index > tabs.value.length - 1 ? tabs.value.length - 1 : index
     tabClick(nextTabIndex)
   }
@@ -65,7 +65,7 @@ function tabRemoveOther() {
 }
 function tabRemoveRight() {
   removeRightTab(clickName)
-  if (tabs.value.every((i: App.Tab) => i.name !== route.name)) {
+  if (tabs.value.every((i: App.Tab) => i.fullPath !== route.fullPath)) {
     tabClick(clickName)
   }
 }
@@ -127,23 +127,23 @@ function dragenter(e: { preventDefault: () => void }, index: number) {
     <transition-group name="tabs">
       <div
         v-for="(item, index) in tabs"
-        :key="item.name"
+        :key="item.fullPath"
         class="tab-item"
-        :class="{ 'tab-active': item.name === route.name }"
+        :class="{ 'tab-active': item.fullPath === route.fullPath }"
         draggable="true"
-        @click="tabClick(item.name, false)"
-        @contextmenu.prevent="rightClick($event, item.name)"
+        @click="tabClick(item.fullPath, false)"
+        @contextmenu.prevent="rightClick($event, item.fullPath)"
         @dragenter="dragenter($event, index)"
         @dragover="dragover($event)"
         @dragstart="dragstart(index)"
       >
-        <div v-show="item.name === route.name" class="circle" />
+        <div v-show="item.fullPath === route.fullPath" class="circle" />
         <div class="content">
           {{ item.title }}
         </div>
         <div
           class="carbon:close close-icon hover:carbon:close-filled"
-          @click.stop="tabRemove(item.name)"
+          @click.stop="tabRemove(item.fullPath)"
         />
       </div>
     </transition-group>

src/layouts/default.vue

@@ -5,11 +5,11 @@ const router = useRouter()
 const routes = router.getRoutes()
 const needCacheRouteNames = routes
   .filter((item) => item.meta && !item.meta.notCache)
-  .map((item) => item.name)
+  .map((item) => item.fullPath)
 
 const cacheList = computed(() => {
   const arr = tabs.value
-    .map((item) => item.name)
+    .map((item) => item.fullPath.replace(/\?.*$/, ''))
     .filter((item) => needCacheRouteNames.includes(item))
     .map((item) => item.replace(/^\//, ''))
   return arr
@@ -29,7 +29,7 @@ const cacheList = computed(() => {
         <router-view v-slot="{ Component, route }">
           <transition name="fade-transform" mode="out-in">
             <keep-alive :include="cacheList">
-              <component :is="Component" :key="route.name" />
+              <component :is="Component" :key="route.fullPath" />
             </keep-alive>
           </transition>
         </router-view>

src/router/index.ts

@@ -18,7 +18,7 @@ router.beforeEach((to, _from, next) => {
   if (!logged.value) return next('/login')
   const { addTab } = useStore('app')
   if (to.meta.title) {
-    const tab = { title: to.meta.title, name: to.name } as App.Tab
+    const tab = { title: to.meta.title, fullPath: to.fullPath } as App.Tab
     addTab(tab)
   }
   next()

src/store/app.ts

@@ -1,4 +1,4 @@
-const defaultTab: App.Tab = { title: 'dashboard', name: '/' }
+const defaultTab: App.Tab = { title: 'dashboard', fullPath: '/' }
 
 export default defineStore({
   id: 'app',
@@ -17,20 +17,20 @@ export default defineStore({
       this.isCollapse = !this.isCollapse
     },
     addTab(tab: App.Tab = defaultTab) {
-      if (this.tabs.some((t) => t.name === tab.name)) return
+      if (this.tabs.some((t) => t.fullPath === tab.fullPath)) return
       this.tabs.push(tab)
     },
-    removeTab(name: string) {
-      this.tabs = this.tabs.filter((t) => t.name !== name)
+    removeTab(fullPath: string) {
+      this.tabs = this.tabs.filter((t) => t.fullPath !== fullPath)
       if (this.tabs.length === 0) {
         this.addTab()
       }
     },
-    removeOtherTab(name: string) {
-      this.tabs = this.tabs.filter((t) => t.name === name)
+    removeOtherTab(fullPath: string) {
+      this.tabs = this.tabs.filter((t) => t.fullPath === fullPath)
     },
-    removeRightTab(name: string) {
-      const index = this.tabs.findIndex((i) => i.name === name)
+    removeRightTab(fullPath: string) {
+      const index = this.tabs.findIndex((i) => i.fullPath === fullPath)
       this.tabs = this.tabs.slice(0, index + 1)
     },
     removeAllTab() {