异步组件 - 无法看到加载器和实际组件

Question

我有两个组成部分：

• hello.vue - 我要渲染的实际组件
• loader.vue - 包含装载程序的组件

我写了app.vue（下面的代码）以异步方式加载hello.vue（使用延迟属性）。

实际行为是没有显示任何内容。 如果我尝试单独呈现loader.vue组件和hello.vue，则它们正在运行。

整个代码can be found on here

所以如何获得以下行为： 1. loader.vue的加载器可见200ms 2. hello.vue正在取代它。

app.vue

<template>
  <AsyncComp></AsyncComp>
</template>

<script>
const hello = () => import('./hello.vue')
import loader from './loader.vue'
const AsyncComp = () => ({
  // The component to load. Should be a Promise
  component: hello,
  // A component to use while the async component is loading
  loading: loader,
  delay: 200
})
export default {
  name: 'app',
  components: { hello, loader, AsyncComp }
}
</script>