Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Роутинг та навігація». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Що таке роутинг у Vue.js

**Роутинг (Routing)** - це механізм, який дозволяє створювати **SPA (Single Page Application)**,
у яких переходи між сторінками відбуваються **без перезавантаження браузера**.

У Vue за маршрутизацію відповідає **офіційна бібліотека** `vue-router`.

---

## 2. Встановлення Vue Router

Якщо твій проєкт створено через Vite, просто встанови пакет:

```javascript
npm install vue-router
```

---

## 3. Базове налаштування маршрутизатора

Створи файл `src/router/index.js` (або `.ts`):

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
]

const router = createRouter({
  history: createWebHistory(), // режим HTML5 history API
  routes
})

export default router
```

---

## 4. Підключення маршрутизатора до застосунку

У `main.js` (точка входу):

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')
```

Тепер `router` доступний у всьому застосунку.

---

## 5. Відображення активного маршруту - `<router-view>`

У `App.vue` встав:

```javascript
<template>
  <Header />
  <router-view /> 
  <Footer />
</template>
```

`<router-view>` - це **динамічне місце**, куди Vue Router вставляє компонент,
що відповідає поточному маршруту.

---

## 6. Навігація між сторінками

Є **два способи переходу**:

### Через компонент `<router-link>`

```javascript
<template>
  <nav>
    <router-link to="/">Головна</router-link>
    <router-link to="/about">Про нас</router-link>
  </nav>
</template>
```

Це аналог `<a>`, але без перезавантаження сторінки.

---

### Програмна навігація (через JS)

```javascript
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function goToAbout() {
  router.push('/about')
}
</script>

<template>
  <button @click="goToAbout">Перейти на сторінку "Про нас"</button>
</template>
```

---

## 7. Динамічні маршрути (з параметрами)

Можна передавати **динамічні параметри** через `:id`:

```javascript
const routes = [
  { path: '/users/:id', component: UserPage }
]
```

### Доступ до параметрів:

```javascript
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id) // значення :id з URL
</script>
```

Приклад: `/users/42` -> `route.params.id === '42'`

---

## 8. Перехід з передачею параметрів і query

```javascript
router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})
```

URL буде: `/users/42?tab=profile`

---

## 9. Вкладені маршрути (nested routes)

Можна будувати **ієрархію сторінок** - layout + вкладені view.

```javascript
{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    { path: '', component: DashboardHome },
    { path: 'settings', component: DashboardSettings }
  ]
}
```

У `DashboardLayout.vue`:

```javascript
<template>
  <Sidebar />
  <router-view /> 
</template>
```

---

## 10. Захищені маршрути (Navigation Guards)

Можна контролювати доступ до маршрутів (наприклад, вимагати авторизацію):

```javascript
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
```

У маршрутах можна задати мету:

```javascript
{ path: '/profile', component: ProfilePage, meta: { requiresAuth: true } }
```

---

## 11. Робота з активними посиланнями

`<router-link>` автоматично додає CSS-клас `router-link-active` для поточного маршруту.
Його можна кастомізувати:

```javascript
<router-link to="/" active-class="active-link">Головна</router-link>
```

---

## 12. Історія (history) і режими

Vue Router підтримує 2 режими:

| Режим | Опис |
|---|---|
| `createWebHistory()` | Використовує HTML5 History API (красиві URL без `#`) |
| `createWebHashHistory()` | Використовує хеші (`/#/about`), зручно для статичного хостингу |

---

## Підсумок

> **Роутинг у Vue.js** реалізується через `vue-router` і дозволяє:
>
> - Навігувати між компонентами без перезавантаження сторінки,
> - Використовувати динамічні й вкладені маршрути,
> - Додавати guards (перевірки, редиректи),
> - Створювати layout-компоненти і SPA-структуру.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати562 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.