Что такое Vue Router

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

Установка и подключение Vue Router

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

npm install vue-router@next

Для Vue 3 используется версия next, а для Vue 2 — стандартная версия. После установки импортируем и подключаем маршрутизатор:

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

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

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

export default router;

В основном файле приложения подключение Vue Router выглядит так:

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

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

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

Маршруты определяются в массиве объектов, где каждый объект содержит:

  • path — URL-путь маршрута.
  • component — компонент, который будет отображен при переходе по пути.
  • name — уникальное имя маршрута (необязательно, удобно для навигации программно).
  • props — позволяет передавать параметры маршрута в компонент как свойства.

Пример с передачей параметров:

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: () => import('./components/User.vue'),
    props: true
  }
];

Навигация между маршрутами

Для перехода между страницами используются два основных метода:

  1. Компонент <router-link> — создает ссылку для навигации без перезагрузки страницы:
<router-link to="/">Главная</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}">Профиль</router-link>
  1. Программная навигация через объект router:
this.$router.push({ name: 'user', params: { id: 123 } });
this.$router.replace('/about');

Разница между push и replace заключается в том, что replace заменяет текущую запись в истории браузера, а push добавляет новую.

Динамические маршруты и параметры

Vue Router поддерживает динамические сегменты URL с использованием :param:

{
  path: '/post/:postId',
  component: Post,
  props: true
}

Передача параметра postId в компонент:

export default {
  props: ['postId'],
  mounted() {
    console.log(this.postId);
  }
}

Для необязательных параметров можно использовать ?:

{
  path: '/category/:id?',
  component: Category
}

Вложенные маршруты

Вложенные маршруты позволяют отображать компоненты внутри других компонентов. Для этого используется свойство children:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: 'stats', component: Stats },
      { path: 'settings', component: Settings }
    ]
  }
];

В родительском компоненте необходимо указать <router-view> для отображения дочерних маршрутов:

<template>
  <div>
    <h1>Панель управления</h1>
    <router-view></router-view>
  </div>
</template>

Навигационные охранники (Navigation Guards)

Vue Router предоставляет возможность перехватывать переходы между маршрутами и выполнять действия перед или после навигации:

  • Глобальные охранники:
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});
  • Охранники маршрута:
const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (!isAdmin()) next('/unauthorized');
      else next();
    }
  }
];
  • Охранники компонента:
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => vm.loadData());
  }
}

Работа с программной историей

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

  • createWebHistory() — использует HTML5 History API, позволяет красивые URL без #.
  • createWebHashHistory() — использует хэш в URL (#), поддерживает старые браузеры.
  • createMemoryHistory() — полезно для серверного рендеринга.

Пример:

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

Lazy Loading маршрутов

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

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

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

Метаданные маршрутов

Свойство meta позволяет добавлять произвольные данные к маршруту:

const routes = [
  {
    path: '/profile',
    component: Profile,
    meta: { requiresAuth: true }
  }
];

Обычно используется совместно с глобальными охранниками для контроля доступа.

  • <router-view> — основной контейнер для отображения компонентов маршрутов.
  • <router-link> — генерирует ссылки, поддерживающие активное состояние через active-class:
<router-link to="/about" active-class="active-link">О сайте</router-link>
<router-view></router-view>
  • Поддерживает вложенные <router-view> для дочерних маршрутов.

Переключение между маршрутами и сохранение состояния

При использовании Vue Router навигация выполняется без перезагрузки страницы, поэтому:

  • Сохраняется состояние компонентов.
  • Можно использовать keep-alive для кэширования маршрутов:
<keep-alive>
  <router-view></router-view>
</keep-alive>
  • Поддерживаются анимации перехода через <transition>:
<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

Дополнительные возможности Vue Router

  • Программная навигация с query-параметрами:
this.$router.push({ path: '/search', query: { q: 'Vue' } });
  • Перехват ошибок навигации:
router.push('/home').catch(err => {
  if (err.name !== 'NavigationDuplicated') throw err;
});
  • Редиректы и алиасы:
{
  path: '/home',
  redirect: '/'
},
{
  path: '/profile',
  alias: '/me',
  component: Profile
}
  • Сохранение позиции прокрутки:
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 };
  }
});

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

Оглавление