Skip to main content

Що таке Vue Router?

VueJunior~1 хв читання
Запропонувати правку

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 і програмну навігацію.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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