perf: 完善useTagsView

src/hooks/web/useTagsView.ts

@@ -47,12 +47,17 @@ export const useTagsView = () => {
     callback?.()
   }
 
+  const setTitle = (title: string) => {
+    tagsViewStore.setTitle(title)
+  }
+
   return {
     closeAll,
     closeLeft,
     closeRight,
     closeOther,
     closeCurrent,
-    refreshPage
+    refreshPage,
+    setTitle
   }
 }

src/router/index.ts

@@ -339,7 +339,8 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           hidden: true,
           title: t('router.details'),
-          canTo: true
+          canTo: true,
+          activeMenu: '/function/multiple-tabs'
         }
       }
     ]

src/store/modules/tagsView.ts

@@ -140,6 +140,14 @@ export const useTagsViewStore = defineStore('tagsView', {
     // 设置当前选中的tag
     setSelectedTag(tag: RouteLocationNormalizedLoaded) {
       this.selectedTag = tag
+    },
+    setTitle(title: string) {
+      for (const v of this.visitedViews) {
+        if (v.path === this.selectedTag?.path) {
+          v.meta.title = title
+          break
+        }
+      }
     }
   }
 })

src/views/Function/MultipleTabsDemo.vue

@@ -3,10 +3,15 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { ElInput } from 'element-plus'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useTagsView } from '@/hooks/web/useTagsView'
+
+const { setTitle } = useTagsView()
 
 const { params } = useRoute()
 
 const val = ref(params.id as string)
+
+setTitle(`详情页-${val.value}`)
 </script>
 
 <template>

src/views/hooks/useTagsView.vue

@@ -6,7 +6,8 @@ import { useRouter } from 'vue-router'
 
 const { push } = useRouter()
 
-const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView()
+const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
+  useTagsView()
 
 const closeAllTabs = () => {
   closeAll(() => {
@@ -35,6 +36,10 @@ const closeCurrentTab = () => {
     push('/dashboard/analysis')
   })
 }
+
+const setTabTitle = () => {
+  setTitle(new Date().getTime().toString())
+}
 </script>
 
 <template>
@@ -45,6 +50,6 @@ const closeCurrentTab = () => {
     <ElButton @click="closeOtherTabs"> 关闭其他标签页 </ElButton>
     <ElButton @click="closeCurrentTab"> 关闭当前标签页 </ElButton>
     <ElButton @click="refresh"> 刷新当前标签页 </ElButton>
+    <ElButton @click="setTabTitle"> 修改当前标题 </ElButton>
   </ContentWrap>
 </template>
-@/hooks/web/useTagsView