refactor(projects): add reCacheRoute method

src/layouts/common/global-tab/components/reload-button/index.vue

@@ -6,28 +6,21 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
-import { useAppStore, useRouteStore } from '@/store';
+import { useRouteStore } from '@/store';
 import { useLoading } from '@/hooks';
+
 defineOptions({ name: 'ReloadButton' });
 
-const app = useAppStore();
-const routeStore = useRouteStore();
+const { reCacheRoute } = useRouteStore();
 const route = useRoute();
 const { loading, startLoading, endLoading } = useLoading();
 
-function handleRefresh() {
-  const isCached = routeStore.cacheRoutes.includes(String(route.name));
-  if (isCached) {
-    routeStore.removeCacheRoute(route.name as AuthRoute.AllRouteKey);
-  }
+async function handleRefresh() {
   startLoading();
-  app.reloadPage();
-  setTimeout(() => {
-    if (isCached) {
-      routeStore.addCacheRoute(route.name as AuthRoute.AllRouteKey);
-    }
-    endLoading();
-  }, 1000);
+
+  await reCacheRoute(route.name as AuthRoute.AllRouteKey);
+
+  endLoading();
 }
 </script>
 

src/store/modules/route/index.ts

@@ -14,6 +14,7 @@ import {
   transformRoutePathToRouteName,
   sortRoutes
 } from '@/utils';
+import { useAppStore } from '../app';
 import { useAuthStore } from '../auth';
 import { useTabStore } from '../tab';
 
@@ -151,7 +152,6 @@ export const useRouteStore = defineStore('route-store', {
         await this.initStaticRoute();
       }
     },
-
     /** 从缓存路由中去除某个路由 */
     removeCacheRoute(name: AuthRoute.AllRouteKey) {
       const index = this.cacheRoutes.indexOf(name);
@@ -159,13 +159,30 @@ export const useRouteStore = defineStore('route-store', {
         this.cacheRoutes.splice(index, 1);
       }
     },
-
     /** 添加某个缓存路由 */
     addCacheRoute(name: AuthRoute.AllRouteKey) {
       const index = this.cacheRoutes.indexOf(name);
       if (index === -1) {
         this.cacheRoutes.push(name);
       }
+    },
+    /**
+     * 重新缓存路由
+     */
+    async reCacheRoute(name: AuthRoute.AllRouteKey) {
+      const { reloadPage } = useAppStore();
+
+      const isCached = this.cacheRoutes.includes(name);
+
+      if (isCached) {
+        this.removeCacheRoute(name);
+      }
+
+      await reloadPage();
+
+      if (isCached) {
+        this.addCacheRoute(name as AuthRoute.AllRouteKey);
+      }
     }
   }
 });

src/store/modules/tab/index.ts

@@ -1,7 +1,6 @@
-import { nextTick } from 'vue';
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
 import { defineStore } from 'pinia';
-import { useRouteStore, useAppStore } from '@/store';
+import { useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { localStg } from '@/utils';
 import { useThemeStore } from '../theme';
@@ -121,21 +120,12 @@ export const useTabStore = defineStore('tab-store', {
      * @param fullPath - 路由fullPath
      */
     async removeTab(fullPath: string) {
+      const { reCacheRoute } = useRouteStore();
       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 tabName = this.tabs.find(tab => tab.fullPath === fullPath)?.name as AuthRoute.AllRouteKey | undefined;
+      if (tabName) {
+        await reCacheRoute(tabName);
       }
 
       const isActive = this.activeTab === fullPath;

src/views/about/index.vue

@@ -8,7 +8,16 @@
 </template>
 
 <script setup lang="ts">
+import { onActivated, onMounted } from 'vue';
 import { DevDependency, ProDependency, ProjectInfo, ProjectIntroduction } from './components';
+
+onActivated(() => {
+  console.log('about page activated');
+});
+
+onMounted(() => {
+  console.log('about page mounted');
+});
 </script>
 
 <style scoped></style>