Отмена и перенаправление навигации

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

Навигационные охранники (Navigation Guards)

Навигационные охранники — это основа контроля навигации. Они позволяют выполнять проверку перед изменением маршрута и при необходимости предотвращать переход.

Типы охранников

  1. Глобальные охранники

    • router.beforeEach((to, from, next) => {}) — вызывается перед каждой навигацией. Пример отмены перехода:

      router.beforeEach((to, from, next) => {
  if (!userIsLoggedIn && to.meta.requiresAuth) {
    next(false); // Отмена навигации
  } else {
    next();
  }
});

      Здесь next(false) полностью останавливает переход на целевой маршрут.

    • router.beforeResolve((to, from, next) => {}) — срабатывает после beforeEach и перед финальной загрузкой компонентов, подходит для асинхронной проверки.

    • router.afterEach((to, from) => {}) — выполняется после успешного перехода, не может отменить навигацию, только использоваться для побочных эффектов.

  2. Охранники маршрутов Определяются внутри объекта маршрута:

    const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: (to, from, next) => {
      if (!isAdmin) {
        next('/login'); // Перенаправление на другой маршрут
      } else {
        next();
      }
    }
  }
];

    Использование next('/login') выполняет перенаправление вместо отмены.

  3. Охранники компонентов

    • beforeRouteEnter(to, from, next) — выполняется перед монтированием компонента.

    • beforeRouteUpdate(to, from, next) — вызывается при смене маршрута, если тот же компонент остаётся активным.

    • beforeRouteLeave(to, from, next) — позволяет предотвращать уход с текущего компонента:

      beforeRouteLeave(to, from, next) {
  if (this.hasUnsavedChanges) {
    const answer = window.confirm('Есть несохранённые изменения. Продолжить?');
    if (answer) {
      next();
    } else {
      next(false); // Отмена перехода
    }
  } else {
    next();
  }
}

Отмена навигации

Отмена навигации реализуется с помощью вызова next(false) в любом охраннике. Это возвращает приложение в исходное состояние без изменения URL.

Особенности:

  • Асинхронные проверки полностью поддерживаются:

    router.beforeEach(async (to, from, next) => {
  const allowed = await checkPermissions(to.path);
  if (!allowed) {
    next(false);
  } else {
    next();
  }
});

  • Если next(false) вызывается в глобальном beforeEach, Vue Router отменяет переход и оставляет текущий маршрут без изменений.

  • В компонентах beforeRouteLeave отмена предотвращает уход пользователя с важного состояния.

Перенаправление навигации

Перенаправление осуществляется вызовом next('/target') или next({ name: 'routeName' }). В отличие от отмены, URL изменяется на новый, а предыдущий маршрут не сохраняется как активный.

Примеры:

  1. Простое перенаправление по пути
router.beforeEach((to, from, next) => {
  if (!userIsAuthenticated && to.meta.requiresAuth) {
    next('/login');
  } else {
    next();
  }
});
  1. Перенаправление с именем маршрута
router.beforeEach((to, from, next) => {
  if (from.name === 'Dashboard') {
    next({ name: 'Home' });
  } else {
    next();
  }
});
  1. Перенаправление с сохранением query и hash
next({
  path: '/login',
  query: { redirect: to.fullPath },
  hash: '#login'
});

Важные нюансы

  • Отмена навигации и перенаправление не могут быть выполнены после вызова next() без параметров.
  • Множественные вызовы next() в одном охраннике вызовут ошибку, поэтому нужно строго выбирать один путь: отмена, перенаправление или продолжение.
  • Асинхронные операции внутри охранников требуют корректной обработки промисов и ошибок, чтобы навигация не зависала.

Практическое использование

  • Защита маршрутов для авторизации — типичный сценарий: проверка токена и перенаправление на страницу логина.
  • Предупреждение о потере данных — beforeRouteLeave с подтверждением пользователем.
  • Перенаправление по ролям — разная логика для админов и обычных пользователей.

Эти механизмы делают Vue Router мощным инструментом для управления навигацией в SPA, позволяя точно контролировать, когда и куда пользователь может перемещаться.

Оглавление