Skip to content

为路由页面添加一个异步功能 #6716

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

为路由页面添加一个异步功能 #6716

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 30 additions & 26 deletions packages/effects/layouts/src/basic/content/content.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,35 @@ function transformComponent(
<div class="relative h-full">
<IFrameRouterView />
<RouterView v-slot="{ Component, route }">
<Transition
v-if="getEnabledTransition"
:name="getTransitionName(route)"
appear
mode="out-in"
>
<Suspense v-if="getEnabledTransition">
<Transition

:name="getTransitionName(route)"
appear
mode="out-in"
>

<KeepAlive
v-if="keepAlive"
:exclude="getExcludeCachedTabs"
:include="getCachedTabs"
>
<component
:is="transformComponent(Component, route)"
v-if="renderRouteView"
v-show="!route.meta.iframeSrc"
:key="getTabKey(route)"
/>
</KeepAlive>
<component
:is="Component"
v-else-if="renderRouteView"
:key="getTabKey(route)"
/>
Comment on lines +124 to +127
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix: iframe routes render twice when keepAlive is false

The non-keepAlive branch doesn’t hide the component for iframe routes, so both IFrameRouterView and the route component can render. Mirror the v-show guard used inside KeepAlive.

@@
-                <component
-                  :is="Component"
-                  v-else-if="renderRouteView"
-                  :key="getTabKey(route)"
-                />
+                <component
+                  :is="Component"
+                  v-else-if="renderRouteView"
+                  v-show="!route.meta.iframeSrc"
+                  :key="getTabKey(route)"
+                />
@@
-        <component
-          :is="Component"
-          v-else-if="renderRouteView"
-          :key="getTabKey(route)"
-        />
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          v-show="!route.meta.iframeSrc"
+          :key="getTabKey(route)"
+        />

Also applies to: 145-148

🤖 Prompt for AI Agents 
In packages/effects/layouts/src/basic/content/content.vue around lines 124-127
(and similarly 145-148), the non-keepAlive branch renders the route component
unconditionally which allows iframe routes to render twice; add the same v-show
guard used inside the KeepAlive branch to the v-else-if branch so the component
is hidden when the current route is an iframe (mirror the v-show condition from
the KeepAlive branch) to prevent double rendering.


</Transition>
</Suspense>
<Suspense v-else>
<KeepAlive
v-if="keepAlive"
:exclude="getExcludeCachedTabs"
Expand All @@ -123,26 +146,7 @@ function transformComponent(
v-else-if="renderRouteView"
:key="getTabKey(route)"
/>
</Transition>
<template v-else>
<KeepAlive
v-if="keepAlive"
:exclude="getExcludeCachedTabs"
:include="getCachedTabs"
>
<component
:is="transformComponent(Component, route)"
v-if="renderRouteView"
v-show="!route.meta.iframeSrc"
:key="getTabKey(route)"
/>
</KeepAlive>
<component
:is="Component"
v-else-if="renderRouteView"
:key="getTabKey(route)"
/>
</template>
</Suspense>
</RouterView>
</div>
</template>
Loading