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

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

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

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

Контент

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

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

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

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

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

**Vue Router** - це **офіційний маршрутизатор (router)** для Vue.js, який дозволяє створювати багатосторінкову поведінку всередині односторінкового застосунку (SPA).

Простіше кажучи:

> **Vue Router керує переходами між сторінками/екранами всередині Vue-застосунку без перезавантаження сторінки.**

Це те, що робить ваш Vue-застосунок справжнім SPA.

---

## Що робить Vue Router?

#### 1. Керує URL у браузері

Наприклад:

```
/home
/users
/users/10
/products?sort=price
```

#### 2. Зв'язує URL з компонентами

Наприклад:

```js
{
  path: '/users',
  component: UsersPage
}
```

#### 3. Дозволяє створювати навігацію

Через `<router-link>`:

```html
<router-link to="/users">Users</router-link>
```

#### 4. Змінює вигляд без перезавантаження

Підставляє компоненти в `<router-view>`:

```html
<router-view />
```

#### 5. Керує історією (history API)

Можна використовувати:

- history mode (гарні URL)
- hash mode (`/#/users`)

#### 6. Підтримує вкладені маршрути

Наприклад:

```
/users
/users/10
/users/10/profile
```

#### 7. Передає параметри

Наприклад:

```
/users/:id
```

---

## Мінімальний приклад Vue Router

#### router/index.js:

```js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'

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

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

#### main.js:

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

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

#### App.vue:

```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

<router-view />
```

---

## Можливості Vue Router

#### Навігація

- `router.push('/users')`
- `router.replace()`
- `router.back()`

#### Динамічні маршрути

- `/users/:id`

#### Отримання параметрів

```js
const route = useRoute()
console.log(route.params.id)
```

#### Охоронці маршрутів (guards)

- beforeEnter
- beforeEach
- beforeRouteLeave

Використовується для авторизації, перевірки доступу тощо.

#### Програмні переходи

`router.push({ name: 'product', params: { id: 10 } })`

#### Lazy-loading компонентів

Маршрути завантажуються за потреби.

---

## Підсумок (ідеально для співбесіди)

> **Vue Router - це офіційний маршрутизатор Vue, який керує навігацією, URL-адресами, історією, параметрами й відображенням сторінок у SPA.**
> **Він зв'язує шлях -> компонент, підтримує вкладені маршрути, guards, переходи, lazy-loading і програмну навігацію.**

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

Для рев’юера

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

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