Логотип YeaHub

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

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

Тренажёр

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

Обучение

Навыки

Войти

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

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

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про React Router: vue, router, guard

Какие route-guards существуют во Vue Router?

Вопрос проверяет знание механизмов перехвата навигации и контроля переходов между маршрутами во Vue Router.

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

Во Vue Router существуют глобальные, маршрутные и компонентные route-guards. Они позволяют выполнять код до или после навигации. Guards используются для проверки авторизации, загрузки данных и логирования. Каждый тип применяется на своём уровне. Это основной инструмент контроля навигации.

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

Route-guards во Vue Router — это специальные хуки, которые вызываются в процессе навигации и позволяют управлять переходами между маршрутами.

Глобальные guards

Работают для всех маршрутов приложения.

  1. beforeEach

    • Вызывается перед каждым переходом

    • Может отменить или перенаправить навигацию

  2. beforeResolve

    • Вызывается перед подтверждением маршрута

    • Все асинхронные guards уже выполнены

  3. afterEach

    • Вызывается после завершения навигации

    • Не может отменять переход

Пример:

router.beforeEach((to, from, next) => {
  next();
});

Guards на уровне маршрута

Задаются прямо в конфигурации маршрута.

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    next();
  }
}

Используются для:

  • защиты конкретных маршрутов

  • изоляции логики

Guards на уровне компонента

Определяются внутри компонента.

  • beforeRouteEnter

  • beforeRouteUpdate

  • beforeRouteLeave

Они позволяют управлять навигацией на уровне конкретного экрана.

Вывод

Vue Router предоставляет несколько уровней route-guards, что позволяет гибко управлять навигацией от глобальной логики до поведения отдельных компонентов.

Уровень

  • Рейтинг:

    4

  • Сложность:

    5

Навыки

  • React Router

    React Router

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

#vue

#router

#guard

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