feat: add new route meta

src/layouts/components/tab/TabBar.vue

@@ -10,8 +10,8 @@ const router = useRouter()
 function handleTab(route: RouteLocationNormalized) {
   router.push(route.path)
 }
-function handleClose(name: string) {
-  tabStore.closeTab(name)
+function handleClose(path: string) {
+  tabStore.closeTab(path)
 }
 const options = [
   {
@@ -60,16 +60,16 @@ function handleSelect(key: string) {
       appStore.reloadPage()
     },
     closeCurrent() {
-      tabStore.closeTab(currentRoute.value.name)
+      tabStore.closeTab(currentRoute.value.path)
     },
     closeOther() {
-      tabStore.closeOtherTabs(currentRoute.value.name)
+      tabStore.closeOtherTabs(currentRoute.value.path)
     },
     closeLeft() {
-      tabStore.closeLeftTabs(currentRoute.value.name)
+      tabStore.closeLeftTabs(currentRoute.value.path)
     },
     closeRight() {
-      tabStore.closeRightTabs(currentRoute.value.name)
+      tabStore.closeRightTabs(currentRoute.value.path)
     },
     closeAll() {
       tabStore.closeAllTabs()
@@ -98,22 +98,22 @@ function onClickoutside() {
       type="card"
       size="small"
       :tabs-padding="15"
-      :value="tabStore.currentTab"
+      :value="tabStore.currentTabPath"
       @close="handleClose"
     >
       <n-tab
-        v-for="item in tabStore.inherentTab"
+        v-for="item in tabStore.pinTabs"
         :key="item.path"
-        :name="item.name"
-        @click="router.push('/')"
+        :name="item.path"
+        @click="router.push(item.path)"
       >
-        {{ item.title }}
+        {{ item.meta.title }}
       </n-tab>
       <n-tab
         v-for="item in tabStore.tabs"
         :key="item.path"
         closable
-        :name="item.name as string"
+        :name="item.path as string"
         @click="handleTab(item)"
         @contextmenu="handleContextMenu($event, item)"
       >

src/router/guard.ts

@@ -61,7 +61,7 @@ export function setupRouterGuard(router: Router) {
     // 添加tabs
     tabStore.addTab(to)
     // 设置高亮标签;
-    tabStore.setCurrentTab(to.name as string)
+    tabStore.setCurrentTab(to.path as string)
   })
 
   router.afterEach((to) => {

src/router/routes.inner.ts

@@ -16,6 +16,7 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/views/login/index.vue'), // 注意这里要带上 文件后缀.vue
     meta: {
       title: '登录',
+      withoutTab: true,
     },
   },
   {
@@ -24,7 +25,7 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/views/error/403/index.vue'),
     meta: {
       title: '用户无权限',
-      icon: 'icon-park-outline:error',
+      withoutTab: true,
     },
   },
   {
@@ -34,6 +35,7 @@ export const routes: RouteRecordRaw[] = [
     meta: {
       title: '找不到页面',
       icon: 'icon-park-outline:ghost',
+      withoutTab: true,
     },
   },
   {
@@ -43,6 +45,7 @@ export const routes: RouteRecordRaw[] = [
     meta: {
       title: '服务器错误',
       icon: 'icon-park-outline:close-wifi',
+      withoutTab: true,
     },
   },
   {
@@ -52,6 +55,7 @@ export const routes: RouteRecordRaw[] = [
     meta: {
       title: '找不到页面',
       icon: 'icon-park-outline:ghost',
+      withoutTab: true,
     },
   },
 

src/store/auth.ts

@@ -37,7 +37,7 @@ export const useAuthStore = defineStore('auth-store', {
       routeStore.resetRouteStore()
       // 清空标签栏数据
       const tabStore = useTabStore()
-      tabStore.tabs.length = 0
+      tabStore.clearAllTabs()
       // 重制当前存储库
       this.$reset()
       // 重定向到登录页

src/store/tab.ts

@@ -2,108 +2,94 @@ import type { RouteLocationNormalized } from 'vue-router'
 import { router } from '@/router'
 
 interface TabState {
-  inherentTab: {
-    name: string
-    title: string
-    path: string
-  }[]
+  pinTabs: RouteLocationNormalized[]
   tabs: RouteLocationNormalized[]
-  tabWhiteList: string[]
-  currentTab: string
+  currentTabPath: string
 }
 export const useTabStore = defineStore('tab-store', {
   state: (): TabState => {
     return {
-      inherentTab: [
-        {
-          name: 'dashboard_workbench',
-          title: '工作台',
-          path: '/',
-        },
-      ],
+      pinTabs: [],
       tabs: [],
-      tabWhiteList: ['404', '403', '500', 'login'],
-      currentTab: 'dashboard_workbench',
+      currentTabPath: '',
     }
   },
-  getters: {
-    inherentTabName(): string[] {
-      return this.inherentTab.map((item) => {
-        return item.name
-      })
-    },
-  },
   actions: {
     addTab(route: RouteLocationNormalized) {
-      // 如果已经在固有标签里则不添加
-      if (this.inherentTabName.includes(route.name as string))
+      // 根据meta确定是否不添加，可用于错误页,登录页等
+      if (route.meta.withoutTab)
         return
 
       // 如果标签名称已存在则不添加
-      if (this.hasExistTab(route.name as string))
+      if (this.hasExistTab(route.path as string))
         return
 
-      // 如果在白名单内则不添加,错误页等
-      if (this.tabWhiteList.includes(route.name as string))
-        return
-
-      this.tabs.push(route)
+      // 根据meta.pinTab传递到不同的分组中
+      if (route.meta.pinTab)
+        this.pinTabs.push(route)
+      else
+        this.tabs.push(route)
     },
-    async closeTab(name: string) {
+    async closeTab(path: string) {
       const tabsLength = this.tabs.length
       // 如果动态标签大于一个,才会标签跳转
       if (this.tabs.length > 1) {
         // 获取关闭的标签索引
-        const index = this.getTabIndex(name)
+        const index = this.getTabIndex(path)
         const isLast = index + 1 === tabsLength
         // 如果是关闭的当前页面，路由跳转到原先标签的后一个标签
-        if (this.currentTab === name && !isLast) {
+        if (this.currentTabPath === path && !isLast) {
           // 跳转到后一个标签
           router.push(this.tabs[index + 1].path)
         }
-        else if (this.currentTab === name && isLast) {
+        else if (this.currentTabPath === path && isLast) {
           // 已经是最后一个了，就跳转前一个
           router.push(this.tabs[index - 1].path)
         }
       }
       // 删除标签
       this.tabs = this.tabs.filter((item) => {
-        return item.name !== name
+        return item.path !== path
       })
       // 删除后如果清空了，就跳转到默认首页
       if (tabsLength - 1 === 0)
         router.push('/')
     },
 
-    closeOtherTabs(name: string) {
-      const index = this.getTabIndex(name)
+    closeOtherTabs(path: string) {
+      const index = this.getTabIndex(path)
       this.tabs = this.tabs.filter((item, i) => i === index)
     },
-    closeLeftTabs(name: string) {
-      const index = this.getTabIndex(name)
+    closeLeftTabs(path: string) {
+      const index = this.getTabIndex(path)
       this.tabs = this.tabs.filter((item, i) => i >= index)
     },
-    closeRightTabs(name: string) {
-      const index = this.getTabIndex(name)
+    closeRightTabs(path: string) {
+      const index = this.getTabIndex(path)
       this.tabs = this.tabs.filter((item, i) => i <= index)
     },
-    async closeAllTabs() {
+    clearAllTabs() {
+      this.tabs.length = 0
+      this.pinTabs.length = 0
+    },
+    closeAllTabs() {
       this.tabs.length = 0
       router.push('/')
     },
 
-    hasExistTab(name: string) {
-      return this.tabs.some((item) => {
-        return item.name === name
+    hasExistTab(path: string) {
+      const _tabs = [...this.tabs, ...this.pinTabs]
+      return _tabs.some((item) => {
+        return item.path === path
       })
     },
     /* 设置当前激活的标签 */
-    setCurrentTab(name: string) {
-      this.currentTab = name
+    setCurrentTab(path: string) {
+      this.currentTabPath = path
     },
-    getTabIndex(name: string) {
+    getTabIndex(path: string) {
       return this.tabs.findIndex((item) => {
-        return item.name === name
+        return item.path === path
       })
     },
   },

src/typings/route.d.ts

@@ -19,6 +19,10 @@ declare namespace AppRoute {
     herf?: string
     /** 当前路由需要选中的菜单项(用于跳转至不在左侧菜单显示的路由且需要高亮某个菜单的情况) */
     activeMenu?: string
+    /** 当前路由是否会被添加到Tab中 */
+    withoutTab?: boolean
+    /** 当前路由是否会被固定在Tab中,用于一些常驻页面 */
+    pinTab?: boolean
   }
   /** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
   interface baseRoute {