Установка и настройка Vue Router

Подключение Vue Router

Для начала работы с Vue Router необходимо установить пакет через npm или yarn:

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

Vue Router версии 4 предназначен для использования с Vue 3. После установки его нужно импортировать в проект и интегрировать с экземпляром приложения.

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';

Создание маршрутов

Маршруты определяются в виде массива объектов. Каждый объект описывает путь (path) и компонент (component), который должен отображаться при переходе по этому пути.

import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
  • path — URL-адрес маршрута.
  • component — Vue-компонент, который рендерится при переходе.
  • Дополнительно можно использовать name для удобной навигации через именованные маршруты.
const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: About }
];

Создание экземпляра роутера

Для управления маршрутизацией создается объект роутера с помощью функции createRouter. В параметрах указывается массив маршрутов и стратегия истории.

const router = createRouter({
  history: createWebHistory(), // Используется HTML5 history API
  routes
});

Типы истории:

  • createWebHistory() — чистые URL без хеша.
  • createWebHashHistory() — URL с символом #, совместимо со старыми серверами.
  • createMemoryHistory() — для серверного рендеринга или тестов.

Интеграция роутера в приложение

После создания роутера его необходимо подключить к Vue-приложению через метод use.

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

Теперь маршруты активны, и можно использовать <router-view> для отображения компонентов.

<router-view> служит контейнером для компонентов, привязанных к маршрутам:

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

<router-link> автоматически генерирует ссылки с поддержкой навигации без перезагрузки страницы. Атрибут to может принимать строку (URL) или объект с именем маршрута и параметрами:

<router-link :to="{ name: 'about' }">О сайте</router-link>

Навигация программно

Vue Router позволяет переходить между маршрутами через методы push и replace:

this.$router.push('/about'); // переход на новый маршрут
this.$router.replace('/about'); // переход без добавления в историю

Для работы с Vue 3 Composition API используется функция useRouter:

import { useRouter } from 'vue-router';

setup() {
  const router = useRouter();
  const goHome = () => router.push({ name: 'home' });
  return { goHome };
}

Параметры маршрута

Маршруты могут содержать динамические сегменты с параметрами:

const routes = [
  { path: '/user/:id', name: 'user', component: UserProfile }
];

Параметры доступны через объект route:

import { useRoute } from 'vue-router';

setup() {
  const route = useRoute();
  console.log(route.params.id);
}

Можно также передавать параметры через query-параметры:

router.push({ path: '/search', query: { q: 'vue' } });

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

Vue Router поддерживает охранники для контроля доступа к маршрутам:

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // пример проверки
  if (to.name !== 'login' && !isAuthenticated) next({ name: 'login' });
  else next();
});
  • beforeEach — глобальный охранник перед переходом.
  • beforeEnter — охранник для конкретного маршрута.
  • afterEach — выполняется после завершения перехода, без возможности отмены.

Ленивый импорт компонентов

Для оптимизации загрузки приложения можно использовать динамический импорт компонентов:

const About = () => import('./views/About.vue');

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

Компонент подгружается только при переходе на соответствующий маршрут, что сокращает первоначальный размер бандла.

Итоговая структура проекта с Vue Router

src/
 ├─ main.js        // точка входа
 ├─ App.vue        // корневой компонент
 ├─ router/
 │   └─ index.js   // конфигурация роутера
 └─ views/
     ├─ Home.vue
     └─ About.vue

Файл router/index.js обычно содержит:

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

const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: () => import('../views/About.vue') }
];

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.js и Vue Router.

Оглавление