异步组件延迟在 nuxt js 中

Question

异步组件延迟和加载不起作用。

我的代码：

<template>
<div>
<button @click="startMethod">start</button>
<async-component v-if="start" />
</div>
</template>
<script>
import Loading from '~/components/loading.vue'
import Error from '~/components/error'
const AsyncComponent = () => ({
component: import('~/components/someComponent.vue'),
loading: Loading, // not work
error: Error, // good
delay: 2000, // not work
timeout: 3000 // good
});
export default {
components: {
AsyncComponent
},
data: () => ({
start: false
}),
methods: {
startMethod(){
this.start = true
}
}
}
</script>

如何延迟加载组件的显示？ 我不明白为什么加载器不显示并且延迟不起作用。

Answer 1

因为它是

显示加载组件之前的延迟。默认值：200 毫秒。

参考： https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

尝试将其设置为 10 或 0，您将看到您的加载组件