Структура вложенных маршрутов

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

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      {
        path: 'overview',
        component: OverviewPage
      },
      {
        path: 'settings',
        component: SettingsPage
      }
    ]
  }
];

В данном примере /dashboard/overview и /dashboard/settings являются дочерними маршрутами /dashboard. Родительский компонент DashboardLayout содержит <router-view>, в котором будут отображаться дочерние компоненты в зависимости от активного маршрута.

Компонент <router-view> и его роль

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

<template>
  <div>
    <header>Dashboard Header</header>
    <router-view></router-view> <!-- Рендер дочерних компонентов -->
    <footer>Dashboard Footer</footer>
  </div>
</template>

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

Абсолютные и относительные пути в дочерних маршрутах

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

children: [
  { path: 'profile', component: ProfilePage },
  { path: 'messages', component: MessagesPage }
]

Здесь полный URL для этих маршрутов будет /dashboard/profile и /dashboard/messages. Если указать путь с / в начале (path: '/profile'), это будет абсолютный путь, который не учитывает родительский маршрут и будет доступен как /profile.

Динамические параметры и вложенные маршруты

Вложенные маршруты могут содержать динамические параметры, что позволяет создавать детализированные страницы:

{
  path: '/users',
  component: UsersLayout,
  children: [
    { path: ':id', component: UserDetails },
    { path: ':id/edit', component: UserEdit }
  ]
}

В этом примере доступ к конкретному пользователю осуществляется через /users/123, а редактирование — через /users/123/edit. Компоненты UserDetails и UserEdit могут использовать $route.params.id для получения динамического значения id.

Named Views и вложенные маршруты

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

const routes = [
  {
    path: '/dashboard',
    components: {
      default: DashboardMain,
      sidebar: DashboardSidebar
    },
    children: [
      {
        path: 'reports',
        components: {
          default: ReportsPage,
          sidebar: ReportsSidebar
        }
      }
    ]
  }
];

В родительском компоненте можно использовать именованные <router-view>:

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

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

Redirect и alias в структуре вложенных маршрутов

Вложенные маршруты могут иметь редиректы или алиасы для упрощения навигации:

{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    { path: '', redirect: 'overview' }, // Автоматический редирект на overview
    { path: 'stats', component: StatsPage, alias: 'analytics' } // stats и analytics ведут к одному компоненту
  ]
}

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

Навигационные хуки во вложенных маршрутах

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

  • beforeEnter на уровне маршрута
  • beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave на уровне компонента
{
  path: '/dashboard/settings',
  component: SettingsPage,
  beforeEnter: (to, from, next) => {
    if (!isAdmin()) next('/dashboard/overview')
    else next()
  }
}

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

Lazy loading дочерних компонентов

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

const routes = [
  {
    path: '/dashboard',
    component: () => import('./DashboardLayout.vue'),
    children: [
      {
        path: 'overview',
        component: () => import('./OverviewPage.vue')
      }
    ]
  }
];

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

Комбинирование всех элементов

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

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

Оглавление