Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про React Router: lifecycle, hook

Как можно отследить изменение маршрута во Vue-приложении?

Вопрос проверяет знание Vue Router и способов реагирования на изменение маршрута внутри компонентов.

Короткий ответ

Изменение маршрута можно отследить через watch на $route, через навигационные guard’ы или с помощью хуков маршрута. Самый простой способ — наблюдать за $route или его параметрами. Это позволяет реагировать на смену пути или параметров URL. Такой подход используется для загрузки новых данных. Выбор метода зависит от задачи.

Длинный ответ

Во Vue существует несколько способов отследить изменение маршрута, каждый из которых подходит для разных сценариев.

Наблюдение за объектом $route

Самый распространённый способ — использовать watch.

watch: {
  $route(to, from) {
    this.fetchData();
  }
}

В этом случае:

  • код выполняется при любой смене маршрута

  • доступна информация о старом и новом маршруте

Отслеживание параметров маршрута

Можно следить только за нужными параметрами.

watch: {
  '$route.params.id'(newId) {
    this.loadUser(newId);
  }
}

Навигационные хуки компонента

Vue Router предоставляет специальные хуки.

  • beforeRouteEnter

  • beforeRouteUpdate

  • beforeRouteLeave

Они позволяют реагировать на смену маршрута до или после навигации.

Вывод

Отслеживать изменение маршрута можно через watch или специальные хуки Vue Router, выбирая способ в зависимости от уровня контроля и сложности логики.

Уровень

  • Рейтинг:

    4

  • Сложность:

    5

Навыки

  • React Router

    React Router

Ключевые слова

#lifecycle

#hook

Подпишись на React Developer в телеграм