Как определить и отреагировать на различные варианты изменения маршрута в vue - PullRequest
Новая
       9

Как определить и отреагировать на различные варианты изменения маршрута в vue

0 голосов
/ 05 мая 2020

Мне нужна помощь с проверкой изменений маршрутизатора при трех различных обстоятельствах:

  • Когда пользователь вводит URL-адрес на совершенно новой странице. В этом случае маршрут предназначен для установки начального состояния. (В этом случае в некоторых элементах управления я проверяю наличие флага initialised, чтобы определить, устанавливать ли состояние)

  • Когда пользователь выполняет действие на странице, когда страница загружается и это действие изменяет маршрут.

  • Когда пользователь вводит URL-адрес во время загрузки страницы. Интуитивно понятное поведение должно заключаться в установке состояния страницы. Однако, поскольку я не уверен, как отличить guish этот тип событий от второго типа, эти события игнорируются.

Есть ли способ отличить 2-й и 3-й тип?

1 Ответ

0 голосов
/ 05 мая 2020

  1. Вы можете поместить переменную initial в раздел данных вашего root Vue экземпляра и инициализировать его как true - он покажет вашим компонентам, что это первый маршрут с момента страница загружена в браузер. Затем в ловушке beforeEach вашего маршрутизатора вы установите для этой переменной значение false, но только если аргумент from ловушки имеет непустой массив matched (или если его ключ name не null - учитывая, что все ваши маршруты имеют имя), так что вы можете пропустить вход в первый маршрут / и очистить переменную initial только при выходе из исходного маршрута. Или вы можете использовать хук beforeRouteLeave в соответствующем компоненте для маршрута /, который очистит переменную вместо хука beforeEach.

  2. Вы можете поместить наблюдателя в соответствующий страницу, чтобы следить за изменениями в $route - или вы можете использовать ловушку beforeRouteLeave в соответствующих компонентах (я предпочитаю последний)

  3. Вы можете установить обработчик событий для beforeunload для объекта окна, чтобы определить, когда пользователь вводит новый URL. Это также будет срабатывать, когда вы закрываете вкладку (или браузер). Вы можете посмотреть { ссылка } для неуниверсального решения.

...