Я разделил свое приложение на несколько фрагментов с функцией разделения кода веб-пакета, чтобы весь пакет приложений не загружался, когда пользователь посещает мою веб-страницу.
Куски, которые требуются для некоторых маршрутов, могут быть достаточно большими и могут занимать значительное количество времени для загрузки. Это прекрасно, за исключением того, что пользователь не знает, что страница загружается, когда они нажимают на внутреннюю ссылку, поэтому мне нужно каким-то образом отобразить анимацию загрузки или что-то в этом роде.
Мой маршрутизатор настроен следующим образом:
[
{
path: '/',
component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'),
},
{
path: '/foo',
component: () => import(/* webpackChunkName: 'main' */ './foo.vue'),
},
{
path: '/bar',
component: () => import(/* webpackChunkName: 'main' */ './bar.vue'),
},
]
Advanced Async Components в руководстве Vue.js показывает, как отображать конкретный компонент загрузки при разрешении компонента - это это то, что мне нужно, однако оно также говорит:
Обратите внимание, что при использовании в качестве компонента маршрута в vue-router эти свойства будут игнорироваться, поскольку компоненты асинхронного доступа будут устранены до начала навигации по маршруту.
Как я могу добиться этого в vue-router? Если это невозможно, лениво загруженные компоненты будут для меня бесполезны, потому что это обеспечит пользователю плохой опыт.