Question

我在路由文件中的vue js中使用Advanced Async Components。

因此，当您浏览路线时，将动态获取该组件，直到获取该组件时，才会显示加载程序组件。如果由于网络延迟（超过超时）或任何其他原因而无法下载该组件，则将呈现错误组件。

一切正常。语法为：

function lazyLoadView(AsyncView: any) {
  const AsyncHandler = () => ({
    component: AsyncView,
    loading: ComponentLoading,
    delay: 0,
    error: ComponentError,
    timeout: 6000,
  });

  return Promise.resolve({
    functional: true,
    render(h: any, { data, children }: any) {
      return h(AsyncHandler, data, children);
    },
  });
}

export const routes = [{
    path: '/abc',
    component: () => lazyLoadView(import('@routes/Abc/index.vue')),
  },{
    path: '/def',
    component: () => lazyLoadView(import('@routes/def/index.vue')),
  },
]

我的问题是：

当超时超过时，将呈现错误组件。但是，对特定块的网络调用永远不会中止。
在导航至路由时说/abc如果组件(ABC)没有呈现，则错误组件也是如此，然后在转到其他路由后回到该路由/ abc，我看到错误组件已立即安装。我如何重新获取块以重试获取组件ABC？

VueJS中的异步组件的错误处理

0 个答案: