当你组件中有 Promise 对象时,即 Axios、Ajax 这类的请求,然后把数据渲染到模板中就会报如下图的错误:
在这个异步组件外包裹一个 <Suspense>
组件。比如 App.vue 中使用了异步组件,异步组件又是个路由组件:
App.vue:
<div class="app">
<Suspense>
<router-view />
<template #fallback>
Loading...
</template>
</Suspense>
</div>
当异步组件正在请求数据时,此时页面会出现短暂的空白,而空白处可以用<template #fallback>
来代替。
注意:
<Suspense>
是一个实验性的特性,它的API可能会改变。