Vue的Suspense通过声明式等待异步组件树就绪避免路由切换白屏，需将defineAsyncComponent定义的异步组件用于路由配置，并在router-view外层统一包裹Suspense，配合Transition实现平滑过渡。
Vue 的 Suspense 在路由切换时避免白屏，核心在于把异步加载逻辑从“手动控制 loading 状态”升级为“声明式等待整个组件树就绪”。它不依赖路由守卫或额外状态管理，而是与 defineAsyncComponent 和 Vue Router 的动态导入天然协同。
路由组件必须定义为异步组件
这是前提。同步组件无法触发 Suspense 的等待机制。
- 使用
defineAsyncComponent包裹路由组件，确保打包时自动代码分包 - 推荐写法：
const Home = defineAsyncComponent(() => import('@/views/Home.vue')) - 在路由配置中直接引用该异步组件，不要提前
import同步引入
在路由出口处包裹 Suspense
不是给每个页面组件内部加 Suspense，而是统一放在 <router-view> 外层——这样能捕获所有路由切换时的异步加载。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 模板结构示例：
<template #default>
<router-view />
</template>
<template #fallback>
<div class="skeleton-page"></div>
</template>
</Suspense>
-
#default插槽里只放<router-view>，它会自动渲染当前路由对应的异步组件 -
#fallback可用骨架屏（保持布局）、简洁 loading 动画，甚至带文字提示的过渡态
处理嵌套路由和多级异步依赖
如果子路由组件、页面内嵌套的异步卡片或数据请求也参与加载流程，Suspense 会自动聚合等待——前提是它们都符合异步规范。
立即学习“前端免费学习笔记（深入）”；
- 子组件也要用
defineAsyncComponent或在setup()中返回 Promise（如async setup()） - 避免在异步组件内部再手动用
v-if控制 loading，否则会干扰Suspense的状态收敛 - 若某子组件需独立 fallback，可嵌套一层
Suspense，但顶层仍建议保留统一兜底
配合 Transition 实现平滑过渡
Suspense 解决“等什么”，Transition 解决“怎么切”。两者组合能消除视觉跳跃。
- 将
<Suspense>套在<Transition>内部，或反过来（推荐后者） - 示例：
<Transition name="fade" mode="out-in"><Suspense>...</Suspense></Transition> - 搭配 CSS 过渡动画，让 fallback 到内容的切换更自然，而非硬切
