异步组件处理加载状态用法

Question

老师好！因为业务的需求，需要使用高级异步组件来处理，组件加载跟失败的场景。但是一直没使用成功，没找到原因。

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000

我分别设置弱网环境跟无网环境进行切换，也没有显示 loadingComponent和errorComponent
能麻烦老师看一下么，不知道是哪里使用有问题.复现仓库地址
谢谢老师！

Answer 1

ustbhuangyi 2021-10-20 15:16:29

路由视图组件貌似不支持这种高级异步组件的写法喔

• 提问者 rookie_white #1

  老师，我看文档上 https://vuejs.org/v2/guide/components-dynamic-async.html 说vue-router2.4版本以上支持路由组件，是我理解错了么？

• 提问者 rookie_white #2

  老师给的这个pr地址https://github.com/vuejs/vue-router/pull/2140/files ， 解决了我的问题。不过文档上写的有点在意，谢谢老师了！

• ustbhuangyi 回复 提问者 rookie_white #3

  这个 pr 一直处于 open 状态，没有被合并，只能拿来参考啦

点开查看后面2条评论