chore(projects): When tab is switched, keep the page without refreshing

soybeanjs · Aug 24, 2023 · 83f2514 · 83f2514
1 parent 94179ae
commit 83f2514
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/router/modules/management.ts b/src/router/modules/management.ts
@@ -11,6 +11,7 @@ const management: AuthRoute.Route = {
         title: '权限管理',
         i18nTitle: 'routes.management.auth',
         requiresAuth: true,
+        keepAlive: true,
         icon: 'ic:baseline-security'
       }
     },
@@ -22,6 +23,7 @@ const management: AuthRoute.Route = {
         title: '角色管理',
         i18nTitle: 'routes.management.role',
         requiresAuth: true,
+        keepAlive: true,
         icon: 'carbon:user-role'
       }
     },
@@ -33,6 +35,7 @@ const management: AuthRoute.Route = {
         title: '用户管理',
         i18nTitle: 'routes.management.user',
         requiresAuth: true,
+        keepAlive: true,
         icon: 'ic:round-manage-accounts'
       }
     },
@@ -44,6 +47,7 @@ const management: AuthRoute.Route = {
         title: '路由管理',
         i18nTitle: 'routes.management.route',
         requiresAuth: true,
+        keepAlive: true,
         icon: 'material-symbols:route'
       }
     }

diff --git a/src/store/modules/tab/index.ts b/src/store/modules/tab/index.ts
@@ -1,5 +1,7 @@
+import { nextTick } from 'vue';
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
 import { defineStore } from 'pinia';
+import { useRouteStore, useAppStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { localStg } from '@/utils';
 import { useThemeStore } from '../theme';
@@ -121,6 +123,21 @@ export const useTabStore = defineStore('tab-store', {
     async removeTab(fullPath: string) {
       const { routerPush } = useRouterPush(false);
 
+      // 清除keepAlive缓存
+      const closeTabIndex = this.tabs.findIndex(tab => tab.fullPath === fullPath);
+      if (closeTabIndex !== -1) {
+        const appStore = useAppStore();
+        const routeStore = useRouteStore();
+        const closeTabName = this.tabs[closeTabIndex].name as AuthRoute.AllRouteKey;
+
+        routeStore.removeCacheRoute(closeTabName);
+        appStore.reloadPage();
+
+        nextTick(() => {
+          routeStore.addCacheRoute(closeTabName);
+        });
+      }
+
       const isActive = this.activeTab === fullPath;
       const updateTabs = this.tabs.filter(tab => tab.fullPath !== fullPath);
       if (!isActive) {