Vue启动渲染router-view前如何在App.vue异步加载数据

你遇到的报错核心原因是：<script setup> 中使用顶层 await 会将当前组件标记为异步组件，Vue 要求所有异步组件必须被 <Suspense> 组件包裹才能正常渲染，而默认脚手架创建的项目中根组件 App.vue 外层没有包裹 <Suspense>，因此触发警告。

你完全不需要额外创建 NestedApp.vue 来包裹 Suspense，以下两种方案都可以满足需求，可根据团队习惯选择：

方案1：手动维护加载/错误状态（你提到的自写状态方案） #

这个方案是完全可行的，逻辑直白无门槛，只需要修复你贴的代码里的响应式bug即可：你在then回调里直接给ref变量employees重新赋值，没有修改.value属性，会丢失响应式，修正后代码如下：

<script setup lang="ts">
import { RouterView } from "vue-router";
import { ref } from "vue";

const isLoading = ref(true);
const errorOccured = ref(false);
const employees = ref([]); // 用const声明ref，不要用let

fetch("https://dummy.restapiexample.com/api/v1/employees")
  .then(async response => {
    if (!response.ok) throw new Error('请求失败')
    employees.value = await response.json(); // 必须修改.value，不能直接给employees赋值
    isLoading.value = false;
  })
  .catch(() => {
    errorOccured.value = true;
    isLoading.value = false;
  });
</script>

<template>
  <div v-if="errorOccured">
    初始化失败，请刷新重试
  </div>
  <div v-else-if="isLoading">
    应用加载中...
  </div>
  <router-view v-else :employees="employees" />
</template>

这个方案的优点是没有额外学习成本，所有逻辑都在App.vue内，新人接手也能快速看懂。

方案2：使用Suspense+顶层await（代码更简洁） #

不需要新建嵌套组件，直接修改main.ts的挂载逻辑，在App外层手动包裹Suspense即可：

// main.ts
import { createApp, h, Suspense } from 'vue'
import App from './App.vue'
import router from './router'

// 直接在挂载层给App包Suspense，不需要额外建组件文件
const app = createApp({
  render() {
    return h(Suspense, null, {
      default: h(App),
      fallback: h('div', { class: 'global-loading' }, '应用初始化中...')
    })
  }
})

app.use(router)
app.mount('#app')

改完main.ts之后，你最开始写的带顶层await的App.vue就可以正常渲染，配合onErrorCaptured钩子就能实现错误捕获：

<script setup lang="ts">
import { RouterView } from "vue-router";
import { ref, onErrorCaptured } from "vue";

const initError = ref<Error | null>(null)
// 捕获Suspense边界内所有异步错误（包括顶层await抛出的请求异常）
onErrorCaptured((err) => {
  initError.value = err
  return false // 阻止错误继续向上抛出
})

const response = await fetch("https://dummy.restapiexample.com/api/v1/employees");
if (!response.ok) throw new Error('初始化数据拉取失败')
const employees = await response.json();
</script>

<template>
  <div v-if="initError" class="error-container">
    <p>加载失败：{{ initError.message }}</p>
    <button @click="location.reload()">点击重试</button>
  </div>
  <router-view v-else :employees="employees" />
</template>

针对你提到的「从URL hash解析base64编码的base url，再拉取初始化数据」的场景，按需求选位置即可：

• 如果不需要加载/错误状态复用项目内的Vue组件（比如不需要用UI库的样式、不需要路由能力），可以把初始化逻辑放在main.ts中，等待所有初始化请求完成后再挂载App，失败的话直接操作index.html里的预设错误节点展示提示，首屏速度最快。
• 如果希望加载、错误提示和项目整体UI风格保持一致，复用项目内的组件能力，直接把初始化逻辑放在App.vue中即可，用上面两种方案的任意一种都可以，不需要额外嵌套组件。

注意：Vue 3.2及以上版本中Suspense已经是稳定API，生产环境可以放心使用，不需要担心兼容性问题。

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