Обработка ошибок асинхронного компонента в VueJS - PullRequest
1 голос
/ 30 мая 2019

Я использую Расширенные асинхронные компоненты в vue js в файле маршрута.

Таким образом, при переходе по маршрутам компонент будет извлекаться динамически, и до момента его выборки будет отображаться компонент загрузчика.Если компонент не может быть загружен из-за задержки в сети (превышает время ожидания) или по любой другой причине, компонент ошибки будет обработан.

Это все работает нормально.Синтаксис:

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')),
  },
]

Мои вопросы:

  1. Когда превышено время ожидания, отображается компонент ошибки.Но сетевой вызов к определенному чанку никогда не прерывается.

  2. При переходе к маршруту скажите /abc, если компонент (ABC) не рендерился, и поэтому компонент ошибки сделал это, затем возвращаетсяк этому маршруту / abc после перехода на какой-то другой маршрут, я вижу, что компонент ошибки, немедленно смонтированный.Как я могу повторно получить чанк, чтобы повторить выборку компонента ABC?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...