Асинхронные компоненты Vue обрабатывают состояние загрузки компонента маршрутизации

внешний интерфейс CDN Vue.js vue-router

сценарий проблемы

В крупномасштабных одностраничных приложениях из-за соображений производительности и требований скорости загрузки на первом экране мы обычно используем функцию разделения кода webpack и функцию ленивой загрузки маршрутизации vue-router, чтобы разделить наш код на модули, и только тогда, когда требуется только тогда, когда модуль загружается с сервера.

Однако и у этого решения есть свои проблемы.Когда сетевое окружение плохое, мы впервые обращаемся к модулю маршрутизации.Поскольку для загрузки ресурсов модуля требуется определенное время, наше приложение не будет отвечать в течение этого периода времени. .состояние, пользовательский опыт крайне плохой.

решение

В этом случае, с одной стороны, мы можем уменьшить размер кода модуля маршрутизации и использовать хранилище cdn для статических ресурсов, чтобы сократить время загрузки, а с другой стороны, мы можем использовать асинхронные компоненты на компонентах маршрутизации для отображения статус загрузки и ошибки, чтобы пользователи могли получить четкую оперативную обратную связь.
Официальная документация Vue — динамические компоненты и асинхронные компоненты

Реализация

  1. Объявите метод, который возвращает объект Promise на основе функции фабрики динамических компонентов Vue.
/**
 * 处理路由页面切换时，异步组件加载过渡的处理函数
 * @param  {Object} AsyncView 需要加载的组件，如 import('@/components/home/Home.vue')
 * @return {Object} 返回一个promise对象
 */
function lazyLoadView (AsyncView) {
  const AsyncHandler = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: AsyncView,
    // 异步组件加载时使用的组件
    loading: require('@/components/public/RouteLoading.vue').default,
    // 加载失败时使用的组件
    error: require('@/components/public/RouteError.vue').default,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 10000
  });
  return Promise.resolve({
    functional: true,
    render (h, { data, children }) {
      return h(AsyncHandler, data, children);
    }
  });
}
  1. маршрут импорта
const helloWorld = () => lazyLoadView(import('@/components/helloWorld'))
  1. Используется в vue-router
routes: [
    {
        path: '/helloWorld',
        name: 'helloWorld',
        component: helloWorld
    }
]

На этом преобразование завершено, при первой загрузке ресурсов определенного компонента (можно настроить скорость сети на медленную 3g, эффект более очевиден) будет отображаться содержимое вашего загружаемого компонента , и загрузка не будет завершена при превышении времени таймаута.При выборе этого компонента будет отображаться содержимое компонента ошибки (рекомендуется, чтобы компонент ошибки был как можно более простым, т.к. низкоскоростная сеть или отключено, ресурсы изображения в компоненте ошибки могут не загрузиться)

О проблеме выхода из строя хука маршрутизации после использования асинхронных компонентов

После использования конфигурации из этой статьи для реконструкции метода введения маршрутизации возникнет проблема, заключающаяся в том, что хук маршрутизации не может быть использован.Эта проблема также только что обнаружена.После ознакомления с информацией обнаружено, что vue-router в настоящее время не поддерживает этот метод использования.. .
Официальное объяснение:

> WARNING: Components loaded with this strategy will **not** have access to
in-component guards, such as `beforeRouteEnter`, `beforeRouteUpdate`, and
`beforeRouteLeave`. If you need to use these, you must either use route-level
guards instead or lazy-load the component directly, without handling loading
state.

Связь:GitHub.com/v UE JS/v UE-день…

Решение аннулирования хуков маршрутизации после использования асинхронных компонентов

  1. Страницы, которым необходимо использовать перехватчики маршрутизации, отказываются от асинхронной загрузки и используют обычную ленивую загрузку.
  2. Используйте созданные, смонтированные и другие хуки для замены хуков маршрутизации Другие методы находятся в поиске, и вы можете задавать вопросы и решения в комментариях.
Категории