Настройка Vue Router

Основная идея

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

Ключевые аспекты

createRouter — функция для создания экземпляра роутера
routes — массив объектов, описывающих пути и компоненты
createWebHistory — режим history (чистые URL без #)
createWebHashHistory — режим hash (URL с #)
app.use(router) — подключение роутера к приложению

Базовая настройка

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})
app.use(router)

Частые ошибки

Забывают вызвать app.use(router)
Путают createWebHistory и createWebHashHistory
Не настраивают сервер для history mode (404 на прямых переходах)
Создают роуты без компонента или с опечатками в path

Введение и проблематика

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

Vue Router — официальная библиотека маршрутизации для Vue.js. Она управляет URL и отображает нужные компоненты без перезагрузки страницы.

Базовая теория

Установка

bash

npm install vue-router

Основные концепции

Route (маршрут) — соответствие между URL и компонентом
Router — управляет маршрутами и навигацией
router-view — место, где отображается текущий компонент
router-link — компонент для навигации (заменяет <a>)

Пошаговая настройка

Шаг 1: Создание компонентов страниц

vue

<!-- views/HomeView.vue -->
<template>
  <div>
    <h1>Главная страница</h1>
  </div>
</template>

vue

<!-- views/AboutView.vue -->
<template>
  <div>
    <h1>О нас</h1>
  </div>
</template>

Шаг 2: Создание роутера

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

Шаг 3: Подключение к приложению

// 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')

Шаг 4: Добавление router-view и навигации

vue

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">Главная</router-link>
    <router-link to="/about">О нас</router-link>
  </nav>
 
  <!-- Сюда рендерится текущий компонент -->
  <router-view />
</template>

Режимы истории

import { createWebHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
// URL: https://example.com/about

Чистые URL без #
Требует настройки сервера
Рекомендуется для production

⚠️

При использовании createWebHistory сервер должен возвращать index.html для всех путей. Иначе при прямом переходе на /about будет ошибка 404.

Практический пример

Полная структура проекта

text

src/
├── router/
│   └── index.js      # Конфигурация роутера
├── views/
│   ├── HomeView.vue
│   ├── AboutView.vue
│   └── ContactView.vue
├── App.vue
└── main.js

Расширенная конфигурация

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/HomeView.vue')
  },
  {
    path: '/about',
    name: 'about',
    // Lazy loading — компонент загрузится при переходе
    component: () => import('@/views/AboutView.vue')
  },
  {
    path: '/contact',
    name: 'contact',
    component: () => import('@/views/ContactView.vue')
  },
  {
    // Страница 404 — ловит все несуществующие пути
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: () => import('@/views/NotFoundView.vue')
  }
]
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
 
export default router

Навигация в App.vue

vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
 
<template>
  <header>
    <nav>
      <RouterLink to="/">Главная</RouterLink>
      <RouterLink to="/about">О нас</RouterLink>
      <RouterLink to="/contact">Контакты</RouterLink>
    </nav>
  </header>
 
  <main>
    <RouterView />
  </main>
</template>
 
<style>
/* Активная ссылка получает класс router-link-active */
nav a.router-link-active {
  font-weight: bold;
  color: blue;
}
</style>

Пограничные кейсы

Base URL

Если приложение размещено не в корне (например, /app/):

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

Прокрутка при навигации

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // Вернуться к сохранённой позиции при кнопке "Назад"
    if (savedPosition) {
      return savedPosition
    }
    // Иначе прокрутить к началу страницы
    return { top: 0 }
  }
})

Плюсы и минусы Vue Router

Плюсы	Минусы
Официальное решение от Vue	Дополнительная зависимость
Простой API	Требует изучения
Lazy loading из коробки	History mode требует настройки сервера
Поддержка вложенных маршрутов

Вопросы интервьюера

Q: Что такое Vue Router?

Официальная библиотека маршрутизации для Vue.js. Позволяет создавать SPA с несколькими страницами без перезагрузки браузера.

Q: Чем отличается createWebHistory от createWebHashHistory?

createWebHistory создаёт чистые URL (/about), но требует настройки сервера. createWebHashHistory использует URL с # (/#/about) и работает везде без настройки.

Q: Что такое router-view?

Компонент-плейсхолдер, куда Vue Router рендерит компонент текущего маршрута.

Q: Как сделать lazy loading компонента?

Использовать динамический импорт: component: () => import('./MyComponent.vue')

Vue Front-end Инженер