Vue3嵌套路由使用Suspense时子页面内容为何消失？

问题根源 #

当前每个<RouterView>都单独包裹了<Suspense>，导致嵌套路由的子组件Suspense独立于根Suspense。当从嵌套页面（如/demo/demo1）导航到非嵌套页面时，父路由组件（/demo）虽会被根Suspense保留，但父组件内部子RouterView对应的子组件会因路由不匹配被立即销毁，进而导致子页面内容提前消失。

解决方案：统一使用根级Suspense #

将Suspense的作用域提升到根RouterView外层，让所有路由组件（包括嵌套层级的）的异步依赖由根Suspense统一管理，导航时整个旧路由树会被完整保留，直到新路由的所有异步组件加载完成。

修改根App的RouterView代码 #

<template>
  <!-- 根级Suspense包裹整个路由视图 -->
  <Suspense>
    <RouterView v-slot="{ Component }">
      <component :is="Component" v-if="Component" />
    </RouterView>
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

移除嵌套页面中的Suspense #

删除Demo.vue等父路由页面中包裹子RouterView的Suspense，让子组件的异步依赖由根Suspense捕获：

<!-- Demo.vue 中的子RouterView -->
<RouterView v-slot="{ Component }">
  <component :is="Component" v-if="Component" />
</RouterView>

额外优化：配合NProgress进度条 #

在路由导航守卫中集成NProgress，让加载状态更直观：

import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */]
})

router.beforeEach(() => {
  NProgress.start()
})

router.afterEach(() => {
  NProgress.done()
})

export default router

原理说明 #

Vue的Suspense可以捕获其组件树内所有后代组件的异步依赖（包括async setup()、异步组件加载等）。通过根级Suspense统一管理，导航时旧路由的整个组件树会被保留，直到新路由的所有异步操作完成后才会进行DOM替换，彻底解决嵌套子页面内容提前消失的问题，让页面切换体验更接近SSR。

内容的提问来源于stack exchange，提问作者chojnicki