Установка и настройка окружения

Подключение Vue Router к проекту

Для начала необходимо убедиться, что проект на Vue создан и готов к работе. В современных проектах чаще всего используется Vue CLI или Vite. После создания проекта подключение Vue Router выполняется через менеджер пакетов npm или yarn:

npm install vue-router@4
# или
yarn add vue-router@4

Vue Router версии 4 предназначен для Vue 3. Важно устанавливать совместимую версию, так как API и способы интеграции отличаются от предыдущих версий.

Настройка маршрутизатора

После установки создается файл конфигурации маршрутов. Обычно он располагается в папке src/router/index.js или src/router/index.ts при использовании TypeScript.

Пример минимальной конфигурации:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

Ключевые моменты:

  • createWebHistory() используется для HTML5 History API, обеспечивая чистые URL без #.
  • routes — массив объектов, каждый из которых описывает путь (path), имя маршрута (name) и компонент (component), который должен отображаться при переходе.

Подключение маршрутизатора к приложению

После создания маршрутов необходимо подключить маршрутизатор к экземпляру приложения Vue. Это делается в файле main.js или main.ts:

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

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

Метод app.use(router) регистрирует маршрутизатор глобально, позволяя использовать <router-view> для отображения компонентов и <router-link> для переходов между маршрутами.

Структура проекта с Vue Router

Рекомендуемая структура проекта с Vue Router выглядит следующим образом:

src/
├─ assets/
├─ components/
├─ views/
│  ├─ Home.vue
│  └─ About.vue
├─ router/
│  └─ index.js
├─ App.vue
└─ main.js
  • views/ содержит страницы, которые будут отображаться через маршруты.
  • components/ содержит повторно используемые компоненты интерфейса.
  • router/ хранит конфигурацию маршрутов.

Настройка динамических маршрутов

Vue Router поддерживает динамические параметры, позволяя создавать маршруты вида /users/:id.

Пример:

const routes = [
  {
    path: '/users/:id',
    name: 'UserProfile',
    component: () => import('../views/UserProfile.vue')
  }
]
  • :id — динамический сегмент URL.
  • Компонент можно загружать лениво через import(), что улучшает производительность при больших приложениях.
  • В компоненте доступ к параметрам маршрута осуществляется через this.$route.params.id или через Composition API:
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const userId = route.params.id
    return { userId }
  }
}

История маршрутов и режимы навигации

Vue Router поддерживает несколько режимов истории:

  • createWebHistory() — стандартный HTML5 History API без #.
  • createWebHashHistory() — использует хеши в URL, например /about#section. Полезен для проектов, где сервер не настроен на поддержку History API.
  • createMemoryHistory() — предназначен для SSR (Server-Side Rendering), хранит историю в памяти без изменения URL в браузере.

Ошибки и отладка

  • Частая ошибка при установке — несовместимость версии Vue Router с Vue. Проверять следует командой:
npm list vue
npm list vue-router
  • Ошибки при переходе на динамические маршруты часто связаны с отсутствием параметров или неверным использованием useRoute.
  • При проблемах с навигацией проверяется наличие <router-view> в корневом компоненте, иначе компоненты маршрутов не будут отображаться.

Итоговая настройка окружения

После выполнения вышеописанных шагов окружение полностью готово к разработке с Vue Router. Основные моменты:

  • Установлена совместимая версия Vue Router.
  • Создан файл маршрутизатора с массивом маршрутов.
  • Подключен маршрутизатор к экземпляру приложения.
  • Настроена структура проекта, разделяющая views и components.
  • Применены динамические маршруты и ленивые загрузки компонентов.
  • Выбран подходящий режим истории для проекта.

Такое окружение обеспечивает основу для построения многостраничного приложения с современными возможностями навигации и управления состоянием маршрутов.

Оглавление