为路由页面添加一个异步功能 #6716
为路由页面添加一个异步功能 #6716
Conversation
Vcc1
requested review from
anncwb,
vince292007,
mynetfan and
jinmao88
as code owners
|
WalkthroughRefactors route content rendering to split the Transition-enabled and non-transition paths into two separate Suspense branches. Each branch wraps the same KeepAlive/Component logic, preserving transformComponent and keying behavior. The previous single Transition with an else template is removed to support Suspense for async route components. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Route as Router
participant View as Content.vue
participant SuspT as Suspense (Transition)
participant Trans as Transition
participant Susp as Suspense (No Transition)
participant KA as KeepAlive
participant Comp as Component
Route->>View: Route update with Component, route
alt getEnabledTransition == true
View->>SuspT: Render async branch
SuspT->>Trans: Wrap Transition
Trans->>KA: Conditionally wrap Comp (keepAlive)
KA->>Comp: render transformComponent(Component, route)
note right of Comp: Key = getTabKey(route)
else
View->>Susp: Render async branch (no Transition)
Susp->>KA: Conditionally wrap Comp (keepAlive)
KA->>Comp: render transformComponent(Component, route)
note right of Comp: Key = getTabKey(route)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/effects/layouts/src/basic/content/content.vue (1)
103-131: Reduce duplication: single Suspense + dynamic Transition; preserve cache on preference toggleTwo Suspense branches duplicate logic and remount the subtree when toggling transitions, potentially dropping KeepAlive cache. Use one Suspense and keep Transition always present with a conditional name.
@@ - <Suspense v-if="getEnabledTransition"> - <Transition - - :name="getTransitionName(route)" - appear - mode="out-in" - > + <Suspense> + <Transition + :name="getEnabledTransition ? getTransitionName(route) : undefined" + appear + mode="out-in" + > @@ - </Transition> - </Suspense> - <Suspense 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)" - /> - </Suspense> + </Transition> + <!-- Optional: show a lightweight loader while async components resolve --> + <!-- + <template #fallback> + <div class="p-4 text-secondary text-sm">Loading…</div> + </template> + --> + </Suspense>Also applies to: 132-149
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/effects/layouts/src/basic/content/content.vue(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
| :is="Component" | ||
| v-else-if="renderRouteView" | ||
| :key="getTabKey(route)" | ||
| /> |
There was a problem hiding this comment.
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.
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Refactor