Vue Router: подключение и маршруты

Vue Router — официальная библиотека маршрутизации для Vue. Она связывает адрес в браузере с компонентом-страницей: / показывает список статей, /about — страницу «О блоге». Страница при этом не перезагружается: роутер меняет адрес и подменяет компонент.

Установка

В проекте blog выполните:

npm install vue-router

Если при создании проекта отметить пункт Router в списке возможностей, create-vue сам установит библиотеку и создаст файлы из этого урока.

Страницы

Компоненты-страницы принято хранить в папке src/views/ и называть с окончанием View. Создайте src/views/HomeView.vue:

<!-- src/views/HomeView.vue -->
<script setup>
import PostList from '../components/PostList.vue'
</script>
 
<template>
  <h1>Блог</h1>
  <PostList />
</template>

И src/views/AboutView.vue:

<!-- src/views/AboutView.vue -->
<template>
  <h1>О блоге</h1>
  <p>Учебный блог на Vue.</p>
</template>

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

Создайте src/router/index.js:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'home', component: HomeView },
    { path: '/about', name: 'about', component: AboutView },
  ],
})
 
export default router

Каждый маршрут — объект с адресом path, именем name и компонентом component. createWebHistory включает обычные адреса вида /about, без решётки.

Подключение к приложению

В src/main.js добавьте роутер через app.use:

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

RouterView и RouterLink

Замените src/App.vue:

<!-- src/App.vue -->
<template>
  <nav>
    <RouterLink to="/">Главная</RouterLink> |
    <RouterLink to="/about">О блоге</RouterLink>
  </nav>
  <RouterView />
</template>

RouterView — место, где появится компонент текущего маршрута. RouterLink выводит ссылку, по клику на которую роутер меняет страницу без перезагрузки. Откройте http://localhost:5173 — увидите меню и список статей, а по ссылке «О блоге» адрес сменится на /about и появится текст о блоге.

Активной ссылке роутер добавляет класс router-link-active — через него удобно выделить текущий пункт меню.

Ссылка по имени

Вместо адреса можно указать имя маршрута:

<RouterLink :to="{ name: 'about' }">О блоге</RouterLink>

Если позже адрес поменяется на /info, ссылки по имени продолжат работать.

Частая ошибка

Сделать меню на обычных тегах a с атрибутом href="/about". Ссылка сработает, но браузер заново загрузит всё приложение: состояние сбросится, а страница мигнёт. Для переходов внутри приложения используйте RouterLink, а a оставьте для внешних сайтов.