Что такое вложенные маршруты?vue-45

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

Основная концепция

Вложенные маршруты позволяют:

  1. Сохранять общий макет для группы страниц
  2. Менять только определенные части интерфейса при навигации
  3. Создавать сложные многоуровневые интерфейсы

Как работают вложенные маршруты

Базовый пример конфигурации

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      {
        path: '', // default child
        component: DashboardHome
      },
      {
        path: 'profile',
        component: DashboardProfile
      },
      {
        path: 'settings',
        component: DashboardSettings
      }
    ]
  }
]

Структура компонентов

Родительский компонент (DashboardLayout.vue) должен содержать <router-view> для отображения дочерних компонентов:

<!-- DashboardLayout.vue -->
<template>
  <div>
    <h1>Панель управления</h1>
    <nav>
      <router-link to="/dashboard">Главная</router-link>
      <router-link to="/dashboard/profile">Профиль</router-link>
      <router-link to="/dashboard/settings">Настройки</router-link>
    </nav>
    <div class="content">
      <router-view></router-view> <!-- Здесь будут отображаться дочерние компоненты -->
    </div>
  </div>
</template>

Особенности вложенных маршрутов

1. Относительные пути

Дочерние пути указываются относительно родительского:

  • profile → /dashboard/profile
  • ./profile → тоже /dashboard/profile
  • /profile → абсолютный путь (не рекомендуется)

2. Наследование параметров

Дочерние маршруты наследуют параметры родителя:

{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile', // будет /user/:id/profile
      component: UserProfile
    }
  ]
}

3. Множественные уровни вложенности

Можно создавать глубокие иерархии:

{
  path: '/admin',
  component: AdminLayout,
  children: [
    {
      path: 'users',
      component: UserManagement,
      children: [
        {
          path: ':id',
          component: UserDetails
        }
      ]
    }
  ]
}

Практические примеры

Пример 1: Админ-панель

{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: '', component: AdminDashboard },
    { path: 'posts', component: PostList },
    { path: 'posts/:id', component: PostEditor },
    { path: 'users', component: UserList },
    { path: 'users/:id', component: UserProfile }
  ]
}

Пример 2: Кабинет пользователя

{
  path: '/account',
  component: AccountLayout,
  children: [
    { path: '', redirect: 'profile' },
    { path: 'profile', component: Profile },
    { path: 'orders', component: OrderHistory },
    { path: 'settings', component: Settings }
  ]
}

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

Можно комбинировать с ленивой загрузкой:

{
  path: '/projects',
  component: () => import('@/layouts/ProjectLayout.vue'),
  children: [
    { path: '', component: () => import('@/views/ProjectList.vue') },
    { path: ':id', component: () => import('@/views/ProjectDetails.vue') }
  ]
}

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

Хуки выполняются от родителя к детям:

// В родительском компоненте
beforeRouteEnter(to, from, next) {
  console.log('Parent hook')
  next()
}

// В дочернем компоненте
beforeRouteEnter(to, from, next) {
  console.log('Child hook')
  next()
}
// Порядок вывода: Parent hook → Child hook

Резюмируем

  1. Вложенные маршруты создают иерархическую структуру приложения
  2. Родительский компонент должен содержать <router-view>
  3. Дочерние пути указываются относительно родительских
  4. Поддерживается множественная вложенность
  5. Отлично сочетаются с ленивой загрузкой
  6. Навигационные хуки выполняются сверху вниз

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

  • Админ-панелей и личных кабинетов
  • Сложных многоуровневых интерфейсов
  • Приложений с общими макетами для групп страниц
  • Улучшения организации кода и структуры проекта

Вопросы

Собеседования