Маршрутизация во Vue 3 с Vue Router — Полное руководство для начинающих

Vue 3 позволяет создавать одностраничные приложения (SPA), где переход между страницами происходит без перезагрузки браузера.
За это отвечает мощная библиотека — Vue Router. С её помощью можно организовать навигацию, динамические маршруты, вложенные страницы и даже защиту маршрутов.

В этой главе ты узнаешь, как подключить Vue Router, настроить маршруты и научиться управлять переходами между страницами во Vue-приложении.

🧭 1. Что такое SPA и зачем нужен Vue Router

SPA (Single Page Application) — это приложение, у которого есть один HTML-файл, а разные «страницы» отображаются динамически, без перезагрузки.
Vue Router управляет этим процессом: он следит за адресной строкой, отображает нужные компоненты и обновляет историю браузера.

Например, когда пользователь кликает по ссылке /about, Vue не перезагружает страницу — он просто подменяет компонент в <router-view>.

⚙️ 2. Установка и настройка Vue Router

Если у тебя уже создан проект через Vite, просто установи пакет:

npm install vue-router

Теперь создадим файл маршрутизатора — src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
]

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

export default router

Подключим роутер в main.js:

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

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

Теперь Vue знает, как управлять страницами и что показывать при переходе по маршрутам.

🧩 3. Компоненты `<router-link>` и `<router-view>`

Чтобы пользователи могли переходить между страницами без перезагрузки, Vue Router предоставляет специальные компоненты:

<template>
  <nav>
    <router-link to="/">Главная</router-link>
    <router-link to="/about">О проекте</router-link>
  </nav>

  <!-- Здесь будет отображаться текущая страница -->
  <router-view />
</template>

🔹 <router-link> — заменяет обычный <a> и работает без перезагрузки.
🔹 <router-view> — специальное место, куда Vue Router «вставляет» нужный компонент в зависимости от URL.

🧠 4. Динамические маршруты

Иногда нужно отобразить страницу с параметром — например, /users/1 или /users/42.
Для этого используем динамические сегменты маршрута:

const routes = [
  { path: '/users/:id', component: UserView }
]

Теперь в компоненте можно получить параметр id:

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

const route = useRoute()
console.log('ID пользователя:', route.params.id)
</script>

Vue Router автоматически подставит значение :id из URL — удобно и просто.

🔄 5. Программная навигация

Переходить по маршрутам можно не только через <router-link>, но и программно — с помощью router.push():

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

const router = useRouter()

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

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

Так можно управлять навигацией внутри логики компонента — например, после отправки формы или авторизации.

🧱 6. Вложенные маршруты

Во Vue Router можно делать вложенные маршруты — например, страница профиля с вкладками:

{
  path: '/user/:id',
  component: UserView,
  children: [
    { path: 'posts', component: UserPosts },
    { path: 'settings', component: UserSettings }
  ]
}

А внутри UserView.vue добавляем ещё один <router-view> для вложенных маршрутов:

<template>
  <h2>Профиль пользователя {{ route.params.id }}</h2>
  <router-link :to="`${route.fullPath}/posts`">Посты</router-link>
  <router-link :to="`${route.fullPath}/settings`">Настройки</router-link>

  <router-view />
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

🧩 7. Защита маршрутов и навигационные хуки

Vue Router позволяет выполнять проверку перед переходом по маршрутам — например, если пользователь не авторизован.

router.beforeEach((to, from, next) => {
  const isAuthenticated = false
  if (to.path === '/profile' && !isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

Так можно запретить доступ к защищённым страницам и перенаправлять пользователей.

⚡ 8. Оптимизация маршрутов через lazy-loading

Чтобы приложение загружалось быстрее, можно подключать компоненты только при необходимости:

const routes = [
  { 
    path: '/about', 
    component: () => import('../views/AboutView.vue') 
  }
]

Теперь компонент загрузится только тогда, когда пользователь откроет страницу /about.

💡 Заключение

Теперь ты знаешь, как работает маршрутизация во Vue 3:
— что такое SPA и зачем нужен Vue Router;
— как настраивать маршруты и переходы между страницами;
— как использовать динамические и вложенные маршруты;
— и как управлять навигацией программно.

Маршрутизация во Vue 3 с помощью Vue Router