У меня следующая последовательность происходит:
Главный экран
Экран загрузки
Экран результатов
На домашней странице, когда кто-то нажимает кнопку, я отправляю их на экран загрузки через:
this.$router.push({path: "/loading"});
И как только их задача заканчивается, они отправляются на экран результатов через
this.$router.push({path: "/results/xxxx"});
Проблема в том, что обычно они хотят вернуться от результатов к главному экрану, но когда они нажимают назад, они отправляются на загрузку снова, что возвращает их к результатам, поэтому они застряли в бесконечном цикле и не могут перейти вернуться к главному экрану.
Любые идеи, как это исправить? Я бы в идеале хотел бы, если бы была такая опция:
this.$router.push({path: "/loading", addToHistory: false});
который отправит их на маршрут, не добавляя его в историю.
источник
this.$router.replace({path: "/results/xxxx"})
$router.replace
из загрузки. Теперь это позволяет мне вернуться к результатам -> Main, но я не могу перейти к результатам.Ответы:
Есть идеальный способ справиться с этой ситуацией
Вы можете использовать встроенную защиту для контроля маршрута на уровне гранул.
Сделайте следующие изменения в вашем коде
В главном компоненте экрана
В компоненте экрана загрузки
В компоненте экрана результатов
Я только что создал небольшое приложение Vue, чтобы воспроизвести ту же проблему. Это работает в моем местном согласно вашему вопросу. Надеюсь, это решит и вашу проблему .
источник
Я думаю,
router.replace
что это путь, но все же некоторые мысли (не проверенные):В основном при
$router
изменении он отображает загрузочный компонент до техload:stop
пор, покаrouter-view
источник
Это сложный вызов, учитывая, как мало мы знаем о том, что происходит на вашем маршруте погрузки.
Но...
У меня никогда не было необходимости строить маршрут загрузки, только когда загружались компоненты, которые отображаются на нескольких маршрутах на этапе инициализации / сбора данных.
Одним из аргументов в пользу отсутствия маршрута загрузки может быть то, что пользователь потенциально может перейти непосредственно к этому URL (случайно), и тогда кажется, что у него не будет достаточно контекста, чтобы знать, куда отправить пользователя или какое действие предпринять. Хотя это может означать, что в этот момент происходит ошибка маршрута. В целом, не очень хороший опыт.
Другое заключается в том, что если вы упростите свои маршруты, навигация между маршрутами станет намного проще и будет работать так, как ожидается / желательно без использования
$router.replace
.Я понимаю, что это не решает вопрос так, как вы спрашиваете. Но я бы предложил переосмыслить этот маршрут погрузки.
Приложение
Ракушка
Главная страница
Страница результатов
Компонент результатов
По сути, это тот же компонент результатов, который у вас уже есть, но если он
loading
равен true илиresults
имеет значение null, как вы предпочитаете, вы можете создать поддельный набор данных для перебора и создания версий скелета, если хотите. В противном случае вы можете просто оставить все как есть.источник
Другой вариант - использовать History API .
Как только вы попадаете на экран Результаты, вы можете использовать ReplaceState для замены URL в истории браузера.
источник
Это можно сделать с помощью
beforeEach
крючка роутера.Что вам нужно сделать, это вы должны сохранить переменную глобально или в localStorage в
loading
компоненте, когда данные загружаются (до перенаправления наresults
компонент):Затем вы должны проверить эту переменную в хуке beforeEach и перейти к правильному компоненту:
Кроме того, не забудьте сбросить значение false в вашем
main
компоненте при нажатии кнопки запроса (перед маршрутизацией кloading
компоненту):источник
Ваш загрузочный экран вообще не должен контролироваться vue-router. Лучший вариант - использовать модальный / оверлей для экрана загрузки, управляемый javascript. Есть много примеров вокруг Vue. Если вы ничего не можете найти, то у vue-bootstrap есть несколько простых примеров для реализации.
источник