From 3f78b5aa0cd3e7a6f17d58512ca93ee2905d5e2f Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Thu, 12 Nov 2020 23:58:44 +0800
Subject: [PATCH] fix: pageLoading not working

---
 src/design/var/index.less             |  4 +---
 src/layouts/default/LayoutContent.tsx |  1 -
 src/layouts/page/index.tsx            | 22 ++++++++++++++--------
 src/layouts/page/useTransition.ts     |  1 +
 src/router/guard/index.ts             |  3 ++-
 src/router/guard/pageLoadingGuard.ts  |  1 +
 6 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/design/var/index.less b/src/design/var/index.less
index 4df39e2e..62935732 100644
--- a/src/design/var/index.less
+++ b/src/design/var/index.less
@@ -15,7 +15,5 @@
 @side-drag-z-index: 200;
 @page-loading-z-index: 10000;
 
-// app menu
-
 // left-menu
-@app-menu-item-height: 42px;
+@app-menu-item-height: 46px;
diff --git a/src/layouts/default/LayoutContent.tsx b/src/layouts/default/LayoutContent.tsx
index 0ab53f95..29444395 100644
--- a/src/layouts/default/LayoutContent.tsx
+++ b/src/layouts/default/LayoutContent.tsx
@@ -16,7 +16,6 @@ export default defineComponent({
     return () => {
       const { contentMode, openPageLoading } = unref(getProjectConfigRef);
       const { getPageLoading } = appStore;
-
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
         <div class={[`default-layout__main`]}>
diff --git a/src/layouts/page/index.tsx b/src/layouts/page/index.tsx
index 68154df7..c16d6c52 100644
--- a/src/layouts/page/index.tsx
+++ b/src/layouts/page/index.tsx
@@ -12,9 +12,16 @@ import { appStore } from '/@/store/modules/app';
 export default defineComponent({
   name: 'PageLayout',
   setup() {
-    const getProjectConfigRef = computed(() => {
-      return appStore.getProjectConfig;
+    const getProjectConfigRef = computed(() => appStore.getProjectConfig);
+    const openCacheRef = computed(() => {
+      const {
+        openKeepAlive,
+        multiTabsSetting: { show },
+      } = unref(getProjectConfigRef);
+      return openKeepAlive && show;
     });
+    const getCacheTabsRef = computed(() => toRaw(tabStore.getKeepAliveTabsState) as string[]);
+
     const { openPageLoading } = unref(getProjectConfigRef);
 
     let on = {};
@@ -27,21 +34,20 @@ export default defineComponent({
       const {
         routerTransition,
         openRouterTransition,
-        openKeepAlive,
-        multiTabsSetting: { show, max },
+        multiTabsSetting: { max },
       } = unref(getProjectConfigRef);
 
-      const openCache = openKeepAlive && show;
-      const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
       return (
         <div>
           <RouterView>
             {{
               default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
                 // No longer show animations that are already in the tab
-                const name = route.meta.inTab ? 'fade' : null;
+                const cacheTabs = unref(getCacheTabsRef);
+                const isInCache = cacheTabs.includes(route.name as string);
+                const name = isInCache && route.meta.inTab ? 'fade' : null;
 
-                const Content = openCache ? (
+                const Content = unref(openCacheRef) ? (
                   <KeepAlive max={max} include={cacheTabs}>
                     <Component key={route.fullPath} />
                   </KeepAlive>
diff --git a/src/layouts/page/useTransition.ts b/src/layouts/page/useTransition.ts
index ed9088d7..2c1a5945 100644
--- a/src/layouts/page/useTransition.ts
+++ b/src/layouts/page/useTransition.ts
@@ -3,6 +3,7 @@ import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 export function useTransition() {
   function handleAfterEnter() {
     const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
+
     if (!openRouterTransition || !openPageLoading) return;
     // Close loading after the route switching animation ends
     appStore.setPageLoadingAction(false);
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index d5b11724..0fcb8ef1 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -21,6 +21,8 @@ export function createGuard(router: Router) {
   if (removeAllHttpPending) {
     axiosCanceler = new AxiosCanceler();
   }
+
+  createPageLoadingGuard(router);
   router.beforeEach(async (to) => {
     // Determine whether the tab has been opened
     const isOpen = getIsOpenTab(to.fullPath);
@@ -59,5 +61,4 @@ export function createGuard(router: Router) {
 
   openNProgress && createProgressGuard(router);
   createPermissionGuard(router);
-  createPageLoadingGuard(router);
 }
diff --git a/src/router/guard/pageLoadingGuard.ts b/src/router/guard/pageLoadingGuard.ts
index 189fb600..c9e17f60 100644
--- a/src/router/guard/pageLoadingGuard.ts
+++ b/src/router/guard/pageLoadingGuard.ts
@@ -20,6 +20,7 @@ export function createPageLoadingGuard(router: Router) {
       appStore.commitPageLoadingState(true);
       return true;
     }
+
     if (show && openKeepAlive && !isFirstLoad) {
       const tabList = tabStore.getTabsState;
 
-- 
GitLab