在 Vue 3 中,你可以使用
<Suspense>
组件来包裹异步组件,从而提供一个更好的用户体验,包括在组件加载时的占位符和加载失败时的错误提示。<Suspense>
是 Vue 3 提供的一个新特性,允许你指定加载异步组件时的默认内容和错误状态。
以下是一个如何在 Vue 3 中使用 <Suspense>
来设置异步组件的示例:
首先,定义一个异步组件:
// AsyncComponent.vue
<template> <div> <h1>Async Component Loaded</h1> <!-- 其他组件内容 --> </div>
</template> <script>
export default { // 组件选项...
}
</script>
然后,在父组件中使用 <Suspense>
来包裹这个异步组件,并定义加载中和加载失败时的状态:
<template> <div> <h1>Parent Component</h1> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>Loading...</div> </template> <template #error> <div>Failed to load the component</div> </template> </Suspense> </div>
</template> <script>
import { defineAsyncComponent } from 'vue'; const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue')); export default { components: { AsyncComponent }
}
</script>
在这个例子中,<Suspense>
组件有三个插槽:
#default
:这是将要被异步加载的组件的插槽。#fallback
:当异步组件正在加载时显示的插槽内容。#error
:当异步组件加载失败时显示的插槽内容。
当 AsyncComponent
组件正在加载时,用户会看到 #fallback
插槽中的内容(这里是“Loading...”文本)。如果组件加载成功,那么它将替换 #fallback
插槽的内容。如果组件加载失败,则会显示 #error
插槽的内容(这里是“Failed to load the component”文本)。
<Suspense>
组件使得处理异步组件的加载和错误状态变得更加简单和直观,为用户提供了一个更加平滑的体验。