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

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

Проще:

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

---

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

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

```

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

- переходит по ссылке
- вызывает `router.push()`
- обновляет страницу

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

---

## Параметры

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

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

```

- `to` — **куда идём**
- `from` — **откуда идём**

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

---

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

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

```ts
return true

```

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

---

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

```ts
return { path: '/login' }

```

---

### ⛔ Запретить

```ts
return false

```

---

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

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

```

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

```

---

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

⏱ Порядок:

1. `beforeEach`
2. `beforeResolve`
3. `afterEach`

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

---

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

- проверка авторизации
- проверка ролей
- редиректы
- логирование
- смена title страницы

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

```

---

## Важно ⚠️

- Нельзя делать бесконечные редиректы
- Если возвращаешь объект → это **навигация**
- Если используешь `async` — можно `await`

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

```

---

## Коротко

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