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

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

Мой роутер настроен так:

[
  {
    path: '/',
    component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'),
  },
  {
    path: '/foo',
    component: () => import(/* webpackChunkName: 'main' */ './foo.vue'),
  },
  {
    path: '/bar',
    component: () => import(/* webpackChunkName: 'main' */ './bar.vue'),
  },
]

Расширенные асинхронные компоненты в руководстве Vue.js показано, как отображать конкретный «загружаемый» компонент во время разрешения компонента - это именно то, что мне нужно, однако в нем также говорится:

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

Как мне добиться этого в vue-router? Если это невозможно, лениво загруженные компоненты были бы для меня бесполезны, потому что это плохо для пользователя.