Vue Router

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

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

npm install vue-router

Создание маршрутизатора выполняется через импорт createRouter и createWebHistory (или createWebHashHistory) из Vue Router:

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

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

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

export default router;

Подключение маршрутизатора к приложению Vue осуществляется через метод use:

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

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

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

Для переходов между маршрутами используется <router-link>:

<router-link to="/">Главная</router-link>
<router-link to="/about">О проекте</router-link>

Ключевые свойства:

  • to — путь или объект маршрута, к которому будет осуществлен переход.
  • replace — если установлено, переход не добавляется в историю браузера.
  • active-class — CSS-класс для активной ссылки.

Программная навигация

Внутри компонентов можно использовать метод router.push:

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    },
  },
};

Также доступны:

  • router.replace() — аналогично push, но не сохраняет запись в истории.
  • router.go(n) — переход на n шагов назад или вперед в истории.

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

Маршруты могут принимать параметры:

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

В компоненте доступ к параметрам осуществляется через route.params:

export default {
  computed: {
    userId() {
      return this.$route.params.id;
    },
  },
};

Можно задавать регулярные выражения для параметров:

{ path: '/user/:id(\\d+)', component: UserProfile }

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

Вложенные маршруты позволяют отображать один компонент внутри другого. Используется опция 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>

Маршруты с именами

Именованные маршруты позволяют ссылаться на маршруты через имя, а не через путь:

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

Навигация по имени маршрута:

this.$router.push({ name: 'userProfile', params: { id: 123 } });

Защита маршрутов (Navigation Guards)

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

Глобальные охранники

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

Охранники маршрута

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) next();
      else next('/');
    },
  },
];

Компонентные охранники

export default {
  beforeRouteEnter(to, from, next) {
    console.log('Переход в компонент');
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('Обновление маршрута');
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('Выход из компонента');
    next();
  },
};

Ленивый импорт компонентов (Lazy Loading)

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

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

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

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

Настройка режима истории

  • History Mode (createWebHistory) — использует стандартные URL без хеша (/about), требует настройки сервера для корректной обработки маршрутов.
  • Hash Mode (createWebHashHistory) — использует хеш в URL (/#/about), не требует серверной настройки.

Использование query-параметров

Query-параметры позволяют передавать данные через URL:

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

Доступ внутри компонента:

computed: {
  query() {
    return this.$route.query.q;
  },
}

Программное управление историей

Vue Router позволяет управлять историей браузера:

  • router.back() — перейти назад.
  • router.forward() — перейти вперед.
  • router.go(n) — шаги навигации.

Навигация с переадресацией и алиасами

  • Redirect — автоматически перенаправляет пользователя:
{ path: '/home', redirect: '/' }
  • Alias — альтернативный путь для одного маршрута:
{ path: '/profile/:id', component: UserProfile, alias: '/u/:id' }

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

Каждый маршрут может содержать meta — объект с пользовательскими данными:

{
  path: '/admin',
  component: AdminPanel,
  meta: { requiresAuth: true, title: 'Админка' },
}

Доступ к метаданным:

this.$route.meta.requiresAuth

Метаданные часто используются для проверки доступа, установки заголовков страниц и условного отображения элементов интерфейса.

Интеграция с компонентом <router-view>

<router-view> — контейнер, в котором отображаются компоненты текущего маршрута. Может использоваться с именами для нескольких областей:

<router-view name="sidebar"></router-view>
<router-view></router-view>

Для вложенных маршрутов <router-view> обеспечивает рендер дочерних компонентов.

Эти инструменты Vue Router позволяют строить масштабируемые SPA, управлять маршрутизацией гибко и безопасно, поддерживая динамику приложений и высокую производительность.

Оглавление