Глобальные хуки beforeEach

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

Подключение и базовый синтаксис

Для использования глобального хука необходимо вызвать метод beforeEach на экземпляре маршрутизатора:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// Глобальный хук beforeEach
router.beforeEach((to, from, next) => {
  console.log('Навигация от', from.fullPath, 'к', to.fullPath);
  next();
});

export default router;

Пояснение аргументов хука:

to — объект маршрута, к которому осуществляется переход. Содержит информацию о пути, параметрах, query и метаданных.
from — объект маршрута, с которого осуществляется переход.
next — функция, которая определяет дальнейшее поведение навигации:
- next() — продолжить переход;
- next(false) — отменить переход;
- next('/path') — перенаправить на другой маршрут.

Использование для проверки авторизации

Один из самых распространённых сценариев — защита маршрутов, требующих авторизации.

router.beforeEach((to, from, next) => {
  const isAuthenticated = Boolean(localStorage.getItem('token'));

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

Ключевые моменты:

В meta можно хранить произвольные данные маршрута, такие как флаг requiresAuth.
Хук позволяет блокировать переход и перенаправлять пользователя на страницу авторизации.

Асинхронные операции в `beforeEach`

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

router.beforeEach(async (to, from, next) => {
  try {
    const user = await fetchUserFromApi();
    if (to.meta.requiresAdmin && !user.isAdmin) {
      next('/not-authorized');
    } else {
      next();
    }
  } catch (error) {
    console.error('Ошибка при проверке пользователя:', error);
    next('/error');
  }
});

Особенности асинхронного использования:

Навигация ждёт завершения асинхронной операции до вызова next().
Любая ошибка может быть обработана с помощью блоков try/catch, предотвращая непредвиденные переходы.

Взаимодействие с другими хуками

Глобальные хуки beforeEach вызываются перед всеми другими типами хуков:

Глобальные (beforeEach)
Локальные в компонентах (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)
Глобальные после каждого перехода (afterEach)

Понимание последовательности критично для правильной организации логики, особенно при авторизации и логировании.

Доступ к параметрам маршрута и query

to.params и to.query позволяют гибко управлять навигацией:

router.beforeEach((to, from, next) => {
  if (to.params.id && isNaN(Number(to.params.id))) {
    next('/404');
  } else {
    next();
  }
});

to.params — динамические параметры маршрута (/user/:id → { id: '123' })
to.query — параметры строки запроса (/search?q=vue → { q: 'vue' })

Отмена или повторная попытка навигации

Если необходимо прервать переход, используется next(false). Это особенно полезно для предотвращения потери данных при незавершённой форме:

router.beforeEach((to, from, next) => {
  if (from.meta.hasUnsavedChanges) {
    const leave = window.confirm('Есть несохранённые изменения. Выйти?');
    leave ? next() : next(false);
  } else {
    next();
  }
});

Примечание: next(false) останавливает переход и оставляет пользователя на текущем маршруте.