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

因为它是

Delay before showing the loading component. Default: 200ms.

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

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

nuxt js 中的异步组件延迟

Async components delay in nuxt js

javascript

delay

vue.js

async-components

nuxt.js