Vue router: маршрутизація та охоронці навігації

Що таке Vue Router?

Vue Router — це офіційна бібліотека маршрутизації для Vue.js. Вона відображає URL-шляхи на компоненти, дозволяє навігацію та підтримує охоронці для контролю доступу.

Основна налаштування

typescript

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('@/views/Home.vue') },
    { path: '/about', component: () => import('@/views/About.vue') },
    { path: '/users/:id', component: () => import('@/views/UserProfile.vue') },
    { path: '/:pathMatch(.*)*', component: () => import('@/views/NotFound.vue') },
  ],
})

export default router

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

vue

<!-- UserProfile.vue -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
// /users/42 → route.params.id = "42"
</script>

<template>
  <h1>Користувач {{ route.params.id }}</h1>
</template>

Програмна навігація

vue

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

const router = useRouter()

function goToUser(id: number) {
  router.push({ path: \`/users/\${id}\` })
  // або з іменованими маршрутами:
  router.push({ name: 'user', params: { id } })
}

function goBack() {
  router.back()
}
</script>

Охоронці навігації

Глобальні охоронці

typescript

// router/index.ts
router.beforeEach((to, from) => {
  const isAuthenticated = checkAuth()

  if (to.meta.requiresAuth && !isAuthenticated) {
    return { path: '/login', query: { redirect: to.fullPath } }
  }
})

// Метадані маршруту
{
  path: '/dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}

Охоронці для маршруту

typescript

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from) => {
    if (!isAdmin()) return '/unauthorized'
  }
}

Охоронці в компоненті

vue

<script setup>
import { onBeforeRouteLeave } from 'vue-router'

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return window.confirm('У вас є незбережені зміни. Вийти все ж?')
  }
})
</script>

Вкладені маршрути

typescript

{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    { path: '', component: DashboardHome },      // /dashboard
    { path: 'settings', component: Settings },    // /dashboard/settings
    { path: 'profile', component: Profile },      // /dashboard/profile
  ],
}

vue

<!-- DashboardLayout.vue -->
<template>
  <div>
    <Sidebar />
    <main>
      <RouterView /> <!-- Дочірні маршрути рендеряться тут -->
    </main>
  </div>
</template>

Ліниве завантаження (Розділення коду)

typescript

// Кожен маршрут — це окремий шматок — завантажується за запитом
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
  },
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
  },
]

Функція	API
Отримати поточний маршрут	`useRoute()`
Програмна навігація	`useRouter().push()`
Глобальний охоронець	`router.beforeEach()`
Охоронець для маршруту	`beforeEnter` в конфігурації маршруту
Охоронець в компоненті	`onBeforeRouteLeave()`
Ліниве завантаження	`() => import(...)`

Vue Router забезпечує маршрутизацію, схожу на файлову, через конфігурацію, динамічні сегменти з параметрами та потужні охоронці навігації для аутентифікації та контролю доступу. Завжди використовуйте ліниве завантаження (() => import()) для компонентів маршруту, щоб оптимізувати розмір пакету.

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

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

Premium

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

Дочитали статтю?

Практика завдань