我有一个函数用来创建异步组件

function asyncComponentsFactory(component) {
  return {
    // 需要加载的组件 (应该是一个 `Promise` 对象) webpack不支持import函数使用变量来动态引入
    component,
    // 异步组件加载时使用的组件 除非是从远程服务器加载组件或者组件特别大,用户网速又特别慢,否则应该是看不到的
    loading: LoadingComponent,
    // 加载失败时使用的组件
    error: ErrorComponent,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 10 * 1000
  }
}

之后创建了一个组件映射关系,把名字映射到某个具体的组件

componentMap = {
'AComponent': {
    component: () => asyncComponentsFactory(import('@/components/ACompoent'))
  },

'BComponent': {
    component: () => asyncComponentsFactory(import('@/components/BCompoent'))
  },
}

之后通过动态组件的is属性来动态加载组件

<component :is="component"></component>

component = componentMap.AComponent

我简单封装了一下,只要传进去名字就可以实现动态加载相应的组件

事实上也确实能正常工作,网速慢的时候会出现loading,加载错误会出现error

但是偶尔会出现一种情况,那就是组件已经正常加载完成了,但是loading组件依然一直展示,并没有在组件加载完成后消失

我没有办法100%重现,偶尔出现,一刷新又没有了,我现在只好先把loading注释掉了,一切都正常工作,只是网速慢的时候不会出现loading了

不知道有没有人遇到与我类似的情况