Роутинг та навігація

VueJunior~1 хв читання

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>

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

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-структуру.

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

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

Premium

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