Vue3中使用async setup结合router-view出现空白页问题求助

看起来你已经找对了核心方向——用Suspense处理异步组件，但还有几个细节没处理到位，导致路由场景下页面空白。咱们一步步来排查修复：

1. 先修复错误捕获的关键问题 #

你的App.vue里虽然用了onErrorCaptured，但有两个容易忽略的问题：

• setup函数没有返回error变量，模板里的v-if="error"根本拿不到值，就算有错误你也看不到
• onErrorCaptured没有返回false，错误会继续向上传播，直接打断Suspense的渲染流程

修改后的App.vue代码：

<template> 
  <div v-if="error" style="color: red;">{{ error.message || '发生未知错误' }}</div> 
  <Suspense v-if="!error"> 
    <template #default> 
      <router-view></router-view> 
    </template> 
    <template #fallback> 
      <Loading /> 
    </template> 
  </Suspense> 
</template> 
<script> 
import Loading from "./components/Loading" 
import { ref, onErrorCaptured } from "vue" 
export default { 
  name: 'App', 
  components: { Loading }, 
  setup() { 
    const error = ref(null) 
    onErrorCaptured((e) => { 
      error.value = e 
      return false // 阻止错误继续传播，避免中断Suspense的渲染
    })
    // 必须返回error，模板才能访问到这个变量
    return { error }
  } 
} 
</script>

2. 确保路由组件的Async Setup符合规范 #

检查你的Portfolio、Blog等路由组件，它们的async setup需要满足：

• 必须是async function，内部的异步操作（比如接口请求）要用await处理
• 如果组件本身没有异步逻辑，就不要用async setup，避免触发不必要的Suspense等待

举个正确的异步组件示例：

<template>
  <div>{{ articleList }}</div>
</template>
<script setup async>
// 模拟接口请求
const fetchArticles = () => new Promise(resolve => {
  setTimeout(() => resolve(['文章1', '文章2', '文章3']), 1200)
})
const articleList = await fetchArticles()
</script>

3. 路由配置的小检查 #

确认路由里的组件导入路径正确，比如@/views/Portfolio.vue中的@别名，是否在你的项目配置文件（vue.config.js或vite.config.js）里正确指向了src目录。如果别名配置错误，组件加载失败也会导致页面空白。

为什么单独用组件正常，路由里就空白？ #

单独使用组件时，Suspense直接包裹目标组件，错误捕获和异步处理流程能正常触发；但路由场景下，组件是通过router-view动态渲染的，如果错误没有被正确拦截，或者setup的变量没返回，就会导致渲染中断，最终显示空白页面。

按照上面的步骤修改后，应该就能看到路由组件正常渲染，同时如果有错误也会直观显示出来，方便你进一步排查问题。

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