Организация структуры маршрутов

В Vue Router маршруты описываются с помощью объектов, где ключевыми свойствами являются path и component. path задаёт URL-путь, по которому доступен маршрут, а component указывает на компонент Vue, который будет отображаться при переходе. Базовая структура маршрута выглядит следующим образом:

const routes = [
  {
    path: '/home',
    component: HomeComponent
  },
  {
    path: '/about',
    component: AboutComponent
  }
];

Создание экземпляра маршрутизатора происходит через функцию createRouter, где указывается стратегия истории (createWebHistory или createWebHashHistory) и массив маршрутов:

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

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

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

Для построения сложной структуры страниц используется вложенность маршрутов. Вложенные маршруты задаются с помощью свойства children, которое содержит массив подмаршрутов. Родительский маршрут должен содержать компонент, внутри которого используется <router-view> для отображения дочерних компонентов.

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      {
        path: 'stats',
        component: StatsComponent
      },
      {
        path: 'settings',
        component: SettingsComponent
      }
    ]
  }
];

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

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

Маршруты могут содержать динамические сегменты, которые задаются с помощью двоеточия (:) в path. Динамические параметры доступны через объект route.params.

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

Доступ к параметру id осуществляется внутри компонента через this.$route.params.id или с помощью Composition API:

import { useRoute } from 'vue-router';

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

Именованные маршруты

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

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

Переход к маршруту осуществляется через:

router.push({ name: 'profile', params: { id: 42 } });

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

Vue Router предоставляет возможность контролировать доступ к маршрутам с помощью навигационных охранников. На уровне маршрута используется beforeEnter:

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

На уровне глобального маршрутизатора используются router.beforeEach и router.afterEach, что позволяет централизованно обрабатывать проверки авторизации или отслеживание посещений страниц.

Ленивая загрузка компонентов

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

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

Редиректы и псевдонимы

Редирект позволяет автоматически перенаправлять пользователя с одного URL на другой, а псевдонимы создают альтернативные пути для одного и того же компонента.

const routes = [
  { path: '/home', redirect: '/dashboard' },
  { path: '/main', component: MainPage, alias: '/start' }
];

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

Обработка «не найдено»

Для обработки всех неизвестных маршрутов используется путь '*' или в Vue Router 4 — /:pathMatch(.*)*:

const routes = [
  { path: '/:pathMatch(.*)*', component: NotFoundPage }
];

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

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

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

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

В глобальном охраннике можно проверять метаданные:

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

Использование нескольких <router-view>

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

const routes = [
  {
    path: '/profile',
    components: {
      default: ProfileMain,
      sidebar: ProfileSidebar
    }
  }
];

В шаблоне родительского компонента:

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

Это обеспечивает гибкое разделение интерфейса на независимые области и упрощает управление их содержимым.

Оглавление