Маршрутизация: Vue Router

Добавляем приложению несколько «страниц» без перезагрузки браузера — знакомимся с официальной библиотекой маршрутизации Vue Router.

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

Зачем нужен роутер

Одностраничное приложение (SPA) физически — это одна HTML-страница. Но пользователю нужны разделы: «Главная», «О нас», «Профиль». Vue Router имитирует переходы: при смене URL он показывает нужный компонент, не перезагружая страницу. Адресная строка, кнопки «назад/вперёд» и закладки при этом работают как обычно.

Описание маршрутов

Маршруты — это массив объектов «путь → компонент». Его передают в createRouter:

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 },
  { path: '/user/:id', component: UserProfile },  // динамический параметр
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})
// в main.js: app.use(router)

Путь /user/:id — динамический: :id — параметр, доступный компоненту как route.params.id. Один маршрут обслуживает всех пользователей.

Навигация: router-link и router-view

Два встроенных компонента делают всю работу. <router-link> — это ссылка-переход (вместо <a>, чтобы не перезагружать страницу), а <router-view> — место, куда роутер подставит компонент текущего маршрута:

<template>
  <nav>
    <router-link to="/">Главная</router-link>
    <router-link to="/about">О нас</router-link>
  </nav>

  <router-view />   <!-- сюда рендерится текущая страница -->
</template>

Как роутер выбирает компонент

Суть маршрутизации — найти в таблице маршрут, чей путь совпадает с текущим URL. Промоделируем эту выборку:

const routes = [
  { path: "/", component: "Home" },
  { path: "/about", component: "About" },
  { path: "/contact", component: "Contact" },
];

function resolve(url) {
  const match = routes.find(r => r.path === url);
  return match ? match.component : "NotFound";
}

console.log(resolve("/"));
console.log(resolve("/about"));
console.log(resolve("/missing"));

Вывод:

Home
About
NotFound

Шпаргалка

Итог

• Vue Router сопоставляет URL с компонентами для построения SPA.
• Маршруты описывают массивом { path, component }; :id — динамический параметр.
• <router-link> — переход без перезагрузки, <router-view> — место для страницы.
• Адресная строка и кнопки «назад/вперёд» продолжают работать.