fix: fix the problem of page blank caused by page refresh

src/layouts/default/LayoutContent.tsx

@@ -6,23 +6,17 @@ import { ContentEnum } from '/@/enums/appEnum';
 import { appStore } from '/@/store/modules/app';
 // import { RouterView } from 'vue-router';
 import PageLayout from '/@/layouts/page/index';
-import FrameLayout from '/@/layouts/iframe/index.vue';
-
-import { useSetting } from '/@/hooks/core/useSetting';
 export default defineComponent({
   name: 'DefaultLayoutContent',
   setup() {
-    const { projectSetting } = useSetting();
-
     return () => {
       const { getProjectConfig } = appStore;
       const { contentMode } = getProjectConfig;
-
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
         <Layout.Content class={`layout-content ${wrapClass} `}>
           {{
-            default: () => [<PageLayout />, projectSetting.canEmbedIFramePage && <FrameLayout />],
+            default: () => <PageLayout />,
           }}
         </Layout.Content>
       );

src/layouts/page/index.tsx

@@ -6,7 +6,9 @@ import { useTransition } from './useTransition';
 
 import { RouterView, RouteLocation } from 'vue-router';
 import { tabStore } from '/@/store/modules/tab';
+import FrameLayout from '/@/layouts/iframe/index.vue';
 
+import { useSetting } from '/@/hooks/core/useSetting';
 // import { useRouter } from 'vue-router';
 export default defineComponent({
   name: 'PageLayout',
@@ -22,6 +24,7 @@ export default defineComponent({
       const { on: transitionOn } = useTransition();
       on = transitionOn;
     }
+    const { projectSetting } = useSetting();
     return () => {
       const {
         routerTransition,
@@ -32,32 +35,35 @@ export default defineComponent({
 
       const openCache = openKeepAlive && show;
       const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
-      return [
+      return (
-        <RouterView>
+        <div>
-          {{
+          <RouterView>
-            default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
+            {{
-              const Content = openCache ? (
+              default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
-                <KeepAlive max={max} include={cacheTabs}>
+                const Content = openCache ? (
+                  <KeepAlive max={max} include={cacheTabs}>
+                    <Component {...route.params} />
+                  </KeepAlive>
+                ) : (
                   <Component {...route.params} />
-                </KeepAlive>
+                );
-              ) : (
+                return openRouterTransition ? (
-                <Component {...route.params} />
+                  <Transition
-              );
+                    {...on}
-              return openRouterTransition ? (
+                    name={route.meta.transitionName || routerTransition}
-                <Transition
+                    mode="out-in"
-                  {...on}
+                  >
-                  name={route.meta.transitionName || routerTransition}
+                    {() => Content}
-                  mode="out-in"
+                  </Transition>
-                >
+                ) : (
-                  {() => Content}
+                  Content
-                </Transition>
+                );
-              ) : (
+              },
-                Content
+            }}
-              );
+          </RouterView>
-            },
+          {projectSetting.canEmbedIFramePage && <FrameLayout />}
-          }}
+        </div>
-        </RouterView>,
+      );
-      ];
     };
   },
 });

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

@@ -23,6 +23,7 @@ export default {
       meta: {
         frameSrc: 'https://2x.antdv.com/docs/vue/introduce-cn/',
         title: 'antVue文档(内嵌)',
+        afterCloseLoading: true,
       },
     },
     {
@@ -32,6 +33,7 @@ export default {
       meta: {
         frameSrc: 'https://vvbin.cn/docs/',
         title: '项目文档(内嵌)',
+        afterCloseLoading: true,
       },
     },
     {

yarn.lock

@@ -1601,7 +1601,7 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-spinners@^2.2.0, cli-spinners@^2.4.0:
+cli-spinners@^2.2.0:
   version "2.4.0"
   resolved "https://registry.npm.taobao.org/cli-spinners/download/cli-spinners-2.4.0.tgz?cache=0&sync_timestamp=1595080377121&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcli-spinners%2Fdownload%2Fcli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
   integrity sha1-xiVtsha4eM+6RyDnGc7Hz3JoXX8=
@@ -4821,20 +4821,6 @@ ora@^4.0.4:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-ora@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npm.taobao.org/ora/download/ora-5.1.0.tgz?cache=0&sync_timestamp=1599424857800&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fora%2Fdownload%2Fora-5.1.0.tgz#b188cf8cd2d4d9b13fd25383bc3e5cba352c94f8"
-  integrity sha1-sYjPjNLU2bE/0lODvD5cujUslPg=
-  dependencies:
-    chalk "^4.1.0"
-    cli-cursor "^3.1.0"
-    cli-spinners "^2.4.0"
-    is-interactive "^1.0.0"
-    log-symbols "^4.0.0"
-    mute-stream "0.0.8"
-    strip-ansi "^6.0.0"
-    wcwidth "^1.0.1"
-
 os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/os-tmpdir/download/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -6935,13 +6921,6 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite-jsx@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.npm.taobao.org/vite-jsx/download/vite-jsx-1.0.6.tgz#5c33b9da6a6562d041418005370a7e3043b0e70c"
-  integrity sha1-XDO52mplYtBBQYAFNwp+MEOw5ww=
-  dependencies:
-    magic-string "^0.25.7"
-
 vite-plugin-mock@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/vite-plugin-mock/download/vite-plugin-mock-1.0.2.tgz#07bdd67a8006fd60a6a83198479f3c0c57c7df53"