Концепция клиентской маршрутизации

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

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

Маршрут в Vue Router представляет собой объект с минимум двумя обязательными полями:

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

Дополнительно можно использовать следующие свойства:

  • name — уникальное имя маршрута для удобства программной навигации.
  • props — позволяет передавать параметры маршрута в компонент через свойства.
  • redirect — перенаправление на другой маршрут.
  • children — вложенные маршруты для создания иерархии.

Инициализация Vue Router

Для интеграции с приложением Vue создаётся экземпляр маршрутизатора:

import { createRouter, createWebHistory } from 'vue-router';

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

export default router;
  • createWebHistory() — использует History API браузера для управления URL без перезагрузки страницы.
  • routes — массив объектов маршрутов, определяющий структуру приложения.

Подключение маршрутизатора к Vue-приложению осуществляется через app.use(router).

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

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

{ path: '/user/:id', component: UserProfile, props: true }
  • :id — параметр маршрута, который может быть получен в компоненте через this.$route.params.id.
  • props: true позволяет напрямую передавать параметры в компонент как свойства.

Динамические маршруты часто комбинируются с методами watch или beforeRouteUpdate, чтобы реагировать на изменения параметров без повторного создания компонента.

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

Вложенные маршруты создаются с использованием свойства children:

{
  path: '/dashboard',
  component: Dashboard,
  children: [
    { path: 'stats', component: Stats },
    { path: 'settings', component: Settings }
  ]
}
  • Родительский компонент должен содержать <router-view> для отображения дочерних компонентов.
  • Вложенные маршруты позволяют строить сложные интерфейсы с многоуровневой навигацией.

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

Программная навигация выполняется через методы маршрутизатора:

this.$router.push({ name: 'about' });
this.$router.replace('/contact');
  • push добавляет новую запись в историю браузера.
  • replace заменяет текущую запись, не создавая историю перехода.

Для шаблонов Vue используются компоненты <router-link>:

<router-link to="/about">О нас</router-link>
  • Атрибут to может быть строкой URL или объектом с именем маршрута и параметрами.
  • <router-link> автоматически добавляет CSS-класс router-link-active для активного маршрута.

Глобальные и локальные охранники маршрутов

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

  • beforeEach — вызывается перед каждой навигацией:
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});
  • beforeEnter — локальный охранник маршрута:
{
  path: '/admin',
  component: AdminPanel,
  beforeEnter: (to, from, next) => {
    if (!isAdmin()) next('/');
    else next();
  }
}
  • beforeRouteLeave — метод компонента для выполнения логики перед уходом со страницы.

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

Ленивое подключение компонентов

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

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

const routes = [
  { path: '/about', component: About }
];
  • Компонент загружается только при переходе на соответствующий маршрут.
  • Сокращает размер начальной загрузки приложения.

Работа с вложенными <router-view>

Vue Router позволяет использовать несколько <router-view> для отображения компонентов в разных местах страницы:

<router-view name="main"></router-view>
<router-view name="sidebar"></router-view>
{
  path: '/dashboard',
  components: {
    main: DashboardMain,
    sidebar: DashboardSidebar
  }
}
  • Свойство components вместо component позволяет указывать несколько областей отображения.
  • Каждое <router-view> связывается с компонентом по имени.

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

Свойство meta позволяет хранить дополнительную информацию о маршруте:

{
  path: '/profile',
  component: UserProfile,
  meta: { requiresAuth: true, title: 'Профиль' }
}
  • Доступ к метаданным осуществляется через to.meta в охранниках или компонентах.
  • Используется для управления доступом, заголовками страниц и настройками анимаций.

История навигации и прокрутка

Vue Router управляет историей браузера и поддерживает настройку поведения прокрутки:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition;
    return { top: 0 };
  }
});
  • savedPosition возвращает сохранённую позицию при навигации назад.
  • Позволяет реализовать плавную навигацию и сохранение состояния прокрутки между страницами.

Резюме по концепции

Клиентская маршрутизация в Vue Router позволяет строить SPA с:

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

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

Оглавление