что делает конструкция: router.beforeEach((to) => { ... });

router.beforeEach((to) => { ... }) — это глобальный навигационный гард (guard) во Vue Router.

Проще:

👉 код, который выполняется ПЕРЕД каждым переходом по роуту

Что именно происходит

router.beforeEach((to) => {
  // ...
})

Каждый раз, когда пользователь:

• переходит по ссылке

• вызывает router.push()

• обновляет страницу

Vue Router:
1️⃣ собирается перейти на новый маршрут
2️⃣ вызывает beforeEach
3️⃣ ждёт его результат
4️⃣ либо продолжает переход, либо отменяет / перенаправляет

Параметры

Полная сигнатура:

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

• to — куда идём

• from — откуда идём

Чаще используют to.

Что можно делать внутри

✅ Разрешить переход

return true

или ничего не возвращать

🔁 Перенаправить

return { path: '/login' }

⛔ Запретить

return false

Типичный пример — авторизация 🔐

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isAuth()) {
    return { path: '/login' }
  }
})

{
  path: '/profile',
  component: Profile,
  meta: { requiresAuth: true }
}

Когда именно выполняется

⏱ Порядок:

1. beforeEach

2. beforeResolve

3. afterEach

📌 beforeEach — самый ранний хук

Частые кейсы использования

• проверка авторизации

• проверка ролей

• редиректы

• логирование

• смена title страницы

router.beforeEach((to) => {
  document.title = to.meta.title || 'App'
})

Важно ⚠️

• Нельзя делать бесконечные редиректы

• Если возвращаешь объект → это навигация

• Если используешь async — можно await

router.beforeEach(async (to) => {
  await checkAuth()
})

Коротко

router.beforeEach — это фильтр маршрутов, который срабатывает перед каждым переходом