Правильный способ выполнения событий на определенных маршрутах / страницах с использованием Vue

Question

Проект находится в Laravel.

У меня есть одно приложение. js файл, в котором я запускаю свои компоненты и имею методы, например, для заполнения полей выбора значениями. Скажем, у меня есть поле выбора размера и поле выбора цвета, однако оба они находятся на разных страницах.

Нет смысла извлекать данные для всех полей выбора сразу, просто извлеките данные из лотка Ajax, когда запрашивается страница, на которой есть поле выбора.

Однако каков будет правильный подход к этому?

Итак, если URL-адрес будет https://localhost/color, Ajax вызовет запрос к API для получения цвета параметры будут выполнены. Если бы URL-адрес был https://localhost/sizes, был бы выполнен вызов Ajax запроса к API для получения параметров размеров.

Я бы подумал: посмотрите, посмотрите на маршрут или, возможно, на смонтированном / созданном посмотрите какой в ​​данный момент маршрут.

Answer 1

Если вы используете Vue Маршрутизатор, вы можете поместить в компонент beforeRouteEnter() защиту маршрута . Маршрутизатор будет вызывать это всякий раз, когда пользователь переходит к маршруту, который отображает этот компонент. В качестве альтернативы вы можете получить данные в методе mounted() компонентов страницы.