fix: fix keepAlive not work

src/layouts/page/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
                 const renderComp = () => <Component key={route.fullPath} />;
 
                 const PageContent = unref(openCache) ? (
-                  <KeepAlive>{renderComp()}</KeepAlive>
+                  <KeepAlive include={cacheTabs}>{renderComp()}</KeepAlive>
                 ) : (
                   renderComp()
                 );

src/layouts/page/useCache.ts

@@ -35,17 +35,18 @@ export function useCache(isPage: boolean) {
       // not parent layout
       return cached.get(PAGE_LAYOUT_KEY) || [];
     }
-
     const cacheSet = new Set<string>();
     cacheSet.add(unref(name));
 
     const list = cached.get(unref(name));
+
     if (!list) {
       return Array.from(cacheSet);
     }
     list.forEach((item) => {
       cacheSet.add(item);
     });
+
     return Array.from(cacheSet);
   });
   return { getCaches };

src/router/guard/index.ts

@@ -1,4 +1,4 @@
-import { isNavigationFailure, RouteLocationNormalized, Router } from 'vue-router';
+import { RouteLocationNormalized, Router } from 'vue-router';
 
 import { Modal, notification } from 'ant-design-vue';
 
@@ -50,7 +50,7 @@ export function createGuard(router: Router) {
     return true;
   });
 
-  router.afterEach((to, from, failure) => {
+  router.afterEach((to) => {
     // scroll top
     isHash((to as RouteLocationNormalized & { href: string })?.href) && body.scrollTo(0, 0);
 
@@ -60,10 +60,6 @@ export function createGuard(router: Router) {
 
     // change html title
     to.name !== REDIRECT_NAME && setTitle(t(to.meta.title), globSetting.title);
-
-    if (isNavigationFailure(failure)) {
-      console.error('router navigation failed:', failure);
-    }
   });
   createPageLoadingGuard(router);
   createProgressGuard(router);

src/router/index.ts

@@ -35,8 +35,8 @@ export function setupRouter(app: App<Element>) {
   createGuard(router);
 }
 
-router.onError((error) => {
+// router.onError((error) => {
-  console.error(error);
+//   console.error(error);
-});
+// });
 
 export default router;

src/router/routes/modules/demo/level.ts

@@ -55,6 +55,7 @@ const permission: AppRouteModule = {
       component: () => import('/@/views/demo/level/Menu2.vue'),
       meta: {
         title: 'Menu2',
+        // ignoreKeepAlive: true,
       },
     },
   ],

src/store/modules/tab.ts

@@ -97,11 +97,13 @@ class Tab extends VuexModule {
     const pageCacheSet = new Set<string>();
     this.tabsState.forEach((tab) => {
       const item = getRoute(tab);
-      const needAuth = !item.meta.ignoreAuth;
+      const needCache = !item.meta.ignoreKeepAlive;
+      if (!needCache) return;
+
       if (item.meta.affix) {
         const name = item.name as string;
         pageCacheSet.add(name);
-      } else if (item.matched && needAuth) {
+      } else if (item.matched && needCache) {
         const matched = item.matched;
         const len = matched.length;
 
@@ -115,7 +117,7 @@ class Tab extends VuexModule {
           }
           if (i < len - 1) {
             const { meta, name } = matched[i + 1];
-            if (meta && (meta.affix || needAuth)) {
+            if (meta && (meta.affix || needCache)) {
               const mapList = cacheMap.get(key) || [];
               if (!mapList.includes(name as string)) {
                 mapList.push(name as string);
@@ -210,7 +212,6 @@ class Tab extends VuexModule {
   @Mutation
   commitRedoPage() {
     const route = router.currentRoute.value;
-
     for (const [key, value] of this.cachedMapState) {
       const index = value.findIndex((item) => item === (route.name as string));
       if (index === -1) {