Vue.js/Inertia如何等待所有async setup完成后再渲染新页面？

核心思路 #

Inertia默认的页面切换逻辑是先卸载旧页面组件，再加载新页面的异步依赖，这直接导致了Suspense触发时的闪烁。要实现预加载新页面异步逻辑再替换旧页面的效果，需要从拦截导航请求、预加载组件/数据、控制渲染时机这几个方向入手。

具体实现方案 #

1. 自定义Inertia导航拦截器 #

拦截默认的Inertia跳转行为，先手动执行目标页面组件的async setup，等所有异步操作完成后再执行真正的页面跳转：

// 在全局入口文件（如app.js）中
import { router, resolveComponent } from '@inertiajs/vue3'
import routes from './routes' // 你的路由映射配置，格式：{ '/path': () => import('./Pages/xxx.vue') }

const originalVisit = router.visit
router.visit = async (url, options = {}) => {
  // 1. 根据URL获取目标页面组件
  const componentImporter = routes[url]
  if (!componentImporter) return originalVisit(url, options)
  
  const componentModule = await componentImporter()
  const targetComponent = componentModule.default

  // 2. 如果组件有异步setup，手动执行并等待完成
  if (targetComponent.setup && targetComponent.setup.constructor.name === 'AsyncFunction') {
    // 模拟Vue的setup上下文（根据实际需求补充属性）
    const mockContext = {
      attrs: {},
      emit: () => {},
      expose: () => {},
      slots: {},
      props: {}
    }
    await targetComponent.setup(mockContext)
  }

  // 3. 异步逻辑完成后，执行原导航方法（保留旧页面状态直到新页面就绪）
  return originalVisit(url, { ...options, preserveState: true })
}

2. 结合全局状态预加载页面数据 #

用Pinia/Vuex存储预加载的页面数据，让新页面的async setup直接读取缓存，避免重复请求：

<!-- 导航组件中的跳转逻辑 -->
<script setup>
import { router } from '@inertiajs/vue3'
import { usePageStore } from '@/stores/page'

const pageStore = usePageStore()

const navigate = async (url) => {
  // 1. 预加载目标页面数据（复用Inertia的请求头）
  const response = await fetch(url, {
    headers: { 'X-Inertia': true, 'Accept': 'application/json' }
  })
  const pageData = await response.json()

  // 2. 将数据存入全局状态
  pageStore.setPreloadedData(pageData)

  // 3. 执行跳转，保持旧页面状态
  router.visit(url, { preserveState: true })
}
</script>

在页面组件的async setup中直接读取缓存：

<script setup>
import { usePageStore } from '@/stores/page'

const pageStore = usePageStore()
// 优先用预加载的数据，无缓存时再请求
const pageData = pageStore.preloadedData || await fetchPageData()
</script>

3. 全局Suspense+加载状态控制 #

在根组件中用全局Suspense包裹路由视图，配合加载状态控制页面切换时机：

<!-- app.vue -->
<template>
  <!-- 加载遮罩层，覆盖旧页面直到新页面就绪 -->
  <div v-if="isLoading" class="fixed inset-0 bg-white flex items-center justify-center">
    <div class="w-12 h-12 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
  </div>
  <Suspense v-else>
    <router-view />
  </Suspense>
</template>

<script setup>
import { ref, watch } from 'vue'
import { router } from '@inertiajs/vue3'
import { usePageStore } from '@/stores/page'

const isLoading = ref(false)
const pageStore = usePageStore()

watch(router.state, async (newState) => {
  if (newState === 'loading') {
    isLoading.value = true
    // 等待新页面数据加载完成
    while (!pageStore.isPageReady) {
      await new Promise(resolve => setTimeout(resolve, 50))
    }
    isLoading.value = false
  }
})
</script>

4. 导航组件独立化渲染 #

将导航菜单从页面组件中抽离，直接绑定全局状态的数据，避免每次页面切换都重新渲染导航：

<!-- Navigation.vue -->
<script setup>
import { usePageStore } from '@/stores/page'

const pageStore = usePageStore()
// 直接从全局状态读取导航数据，无需异步请求
const navigationMenu = pageStore.navigation
</script>

关键注意事项 #

• 预加载数据时要做缓存校验，避免重复请求相同页面的资源
• 模拟setup上下文时要尽量贴近Vue真实上下文，避免出现逻辑异常
• 加载状态要处理跳转取消、请求失败等边界情况，防止遮罩层一直显示

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