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

我正在路由文件中使用vue js

因此，当您在路径上导航时，组件将被动态获取，并且在获取组件之前，将显示loader组件。如果由于网络延迟（超过超时）或任何其他原因而无法下载组件，则会呈现错误组件

这一切都很好。语法是：

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

---

我有一些意见与你的问题无关。您的代码没有按需加载组件，因为它将在导入文件时立即执行

import

。很抱歉，我的不好，刚刚看到它被包装在一个闭包里。我有一些与你的问题无关的评论。您的代码没有按需加载组件，因为它将在导入文件时立即执行

import

。编辑对不起我的坏，只是看到它是包裹在一个封闭。