解决异步组件时，路由器将忽略加载（旋转）组件

Question

我正在尝试复制官方文档中的一个示例-Handling Loading State。我的问题是，ErrorComponent和LoadingComponent都不会在应有的状态下路由（它们永远不会出现）。我尝试更改timeout的值并拒绝诺言等。

要注意的一件事是，我更改为路线\two时会延迟3秒（这意味着它没有完全断开）

我的vue-router和vue版本是最新的。

import One from '@/components/views/One'
import Two from '@/components/views/One'
import Three from '@/components/views/Three'
import LoadingComponent from '@/components/LoadingComponent'
import ErrorComponent from '@/components/ErrorComponent '

export default {
  created () {
    const routes = [
      { path: '/one', component: One},
      { path: '/two', component: this.makeAsyncComponent(Two) },
      { path: '/three', component: Three }
    ]
    this.addRoutes(routes)
  },
  data () {
    return {
      navButtons: [
        { title: 'One', path: '/one' },
        { title: 'Two', path: '/two' },
        { title: 'Three', path: '/three' }
      ]
    }
  },
  methods: {
    onNavButtonClick ({ path, title }) {
      this.$router.push({ path })
    },
    addRoutes(routes) {
      this.$router.addRoutes(routes)
    },
    makeAsyncComponent (component) {
      const asyncComponent = () => ({
        component: new Promise((resolve, reject) => {
          setTimeout(() => resolve(component), 3000)
        }),
        loading: LoadingComponent,
        error: ErrorComponent,
        delay: 200,
        timeout: 4000
      })
      return asyncComponent
    }
  }
}
</script>

我想念什么？