fix 组件开启缓存后偶尔白屏问题

web/.eslintrc.js

@@ -45,7 +45,7 @@ module.exports = defineConfig({
       { varsIgnorePattern: '.*', args: 'none' },
     ],
     'space-before-function-paren': 'off',
-
+    'vue/multi-word-component-names': 'off',
     'vue/attributes-order': 'off',
     'vue/one-component-per-file': 'off',
     'vue/html-closing-bracket-newline': 'off',

web/package.json

@@ -68,38 +68,38 @@
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
-    "@vue/compiler-sfc": "^3.2.33",
+    "@vue/compiler-sfc": "^3.4.21",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.19",
-    "commitizen": "^4.2.4",
+    "commitizen": "^4.3.0",
-    "core-js": "^3.22.5",
+    "core-js": "^3.36.1",
-    "crypto-js": "^4.1.1",
+    "crypto-js": "^4.2.0",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.4.5",
-    "eslint": "^7.32.0",
+    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.10.0",
-    "eslint-define-config": "1.0.9",
+    "eslint-define-config": "1.12.0",
-    "eslint-plugin-jest": "^24.7.0",
+    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^7.20.0",
+    "eslint-plugin-vue": "^9.24.1",
-    "esno": "^0.7.3",
+    "esno": "^0.16.3",
-    "gh-pages": "^3.2.3",
+    "gh-pages": "^4.0.0",
-    "husky": "^6.0.0",
+    "husky": "^8.0.3",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
-    "less": "^4.1.2",
+    "less": "^4.2.0",
-    "less-loader": "^9.1.0",
+    "less-loader": "^11.1.4",
-    "lint-staged": "^11.2.6",
+    "lint-staged": "^13.3.0",
     "postcss": "^8.4.38",
-    "prettier": "^2.6.2",
+    "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
+    "pretty-quick": "^3.3.1",
     "rimraf": "^3.0.2",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "^29.0.0",
-    "stylelint-order": "^4.1.0",
+    "stylelint-order": "^5.0.0",
-    "stylelint-scss": "^3.21.0",
+    "stylelint-scss": "^4.7.0",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.3.0",
-    "unplugin-vue-components": "^0.17.21",
+    "unplugin-vue-components": "^0.22.12",
     "vite": "^4.5.3",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^2.1.2",

web/src/layout/components/Main/index.vue

@@ -1,13 +1,15 @@
 <template>
   <RouterView>
     <template #default="{ Component, route }">
-      {{ retryKeepAlive(route) }}
+      {{ setKeepAlive(route) }}
       <template v-if="mode === 'production'">
         <transition :name="getTransitionName" appear mode="out-in">
-          <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
+          <div>
-            <component :is="Component" :key="route.fullPath" />
+            <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
-          </keep-alive>
+              <component :is="Component" :key="route.fullPath" />
-          <component :is="Component" v-else :key="route.fullPath" />
+            </keep-alive>
+            <component :is="Component" v-else :key="route.fullPath" />
+          </div>
         </transition>
       </template>
       <template v-else>
@@ -40,12 +42,11 @@
       },
     },
     setup() {
+      const mode = import.meta.env.MODE;
       const router = useRouter();
       const { getIsPageAnimate, getPageAnimateType } = useProjectSetting();
       const asyncRouteStore = useAsyncRouteStore();
-      // 需要缓存的路由组件
       const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
-
       const getTransitionName = computed(() => {
         return unref(getIsPageAnimate) ? unref(getPageAnimateType) : '';
       });
@@ -56,7 +57,7 @@
         return currentComponent.name || currentComponent.__name;
       }
 
-      function retryKeepAlive(route) {
+      function setKeepAlive(route) {
         if (!route?.meta?.keepAlive) {
           return;
         }
@@ -65,26 +66,15 @@
         if (currentName === undefined || route.name === undefined) {
           return;
         }
-
+        if (!keepAliveComponents.value.includes(currentName)) {
-        const index = keepAliveComponents.value.findIndex((name) => name === route.name);
+          asyncRouteStore.keepAliveComponents.push(currentName);
-        if (index > -1 && currentName !== route.name) {
-          const index2 = keepAliveComponents.value.findIndex((name) => name === currentName);
-          if (index2 === -1) {
-            console.warn(
-              `the routing name configured on the backend is inconsistent with the component name in the. vue file. KeepAlive has been retried based on the actual component name, but this may cause unexpected issues.\n routeName:` +
-                route.name +
-                ',currentName:' +
-                currentName
-            );
-            asyncRouteStore.keepAliveComponents.push(currentName);
-          }
         }
       }
-      const mode = import.meta.env.MODE;
+
       return {
         keepAliveComponents,
         getTransitionName,
-        retryKeepAlive,
+        setKeepAlive,
         mode,
       };
     },

web/src/router/router-guards.ts

@@ -102,21 +102,6 @@ export function createRouterGuards(router: Router) {
     if (isNavigationFailure(failure)) {
       //console.log('failed navigation', failure)
     }
-    const asyncRouteStore = useAsyncRouteStoreWidthOut();
-    // 在这里设置需要缓存的组件名称
-    const keepAliveComponents = asyncRouteStore.keepAliveComponents;
-    const currentComName: any = to.matched.find((item) => item.name == to.name)?.name;
-    if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
-      // 需要缓存的组件
-      keepAliveComponents.push(currentComName);
-    } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
-      // 不需要缓存的组件
-      const index = asyncRouteStore.keepAliveComponents.findIndex((name) => name == currentComName);
-      if (index != -1) {
-        keepAliveComponents.splice(index, 1);
-      }
-    }
-    asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
     const Loading = window['$loading'] || null;
     Loading && Loading.finish();
   });