报错详情:
setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered. 翻译: setup函数返回了一个promise,但没有边界在父组件树中找到。 具有异步setup()的组件必须嵌套在中才能呈现。
报错原因:
如果使用<script setup>,可以在顶部直接使用await,结果代码会被编译成 async setup()。
例如子组件A:
<script setup>
import {getAllFrd} from '@/api/addfriends'
let text = await getAllFrd()
</script >
这样使用了async setup()的子组件,父组件需要和Suspense配合使用,否则子组件渲染不出来,报错warn以上内容。
解决:
父组件处理:
<script setup>
import { defineAsyncComponent } from 'vue'
const A = defineAsyncComponent(() =>
import('@/components/A.vue')
)
// 注意:同一个组件例如A组件,只能用一种引入方式,要么 defineAsyncComponent,要么import,
//不能不同父组件一个import一个defineAsyncComponent,否则打包时粘包
</script >
<template>
<div class="index">
<Suspense>
<template #default>
<A />
</template>
</Suspense>
</div>
</template>