Настройка children в конфигурации

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

Основы использования children

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

import { createRouter, createWebHistory } from 'vue-router'
import Parent from './components/Parent.vue'
import ChildA from './components/ChildA.vue'
import ChildB from './components/ChildB.vue'

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child-a',
        component: ChildA
      },
      {
        path: 'child-b',
        component: ChildB
      }
    ]
  }
]

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

export default router

Ключевые моменты:

  • Путь дочернего маршрута относителен родительского. В примере /parent/child-a формируется автоматически.
  • Родительский компонент должен содержать <router-view>, куда будут рендериться дочерние компоненты.

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

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

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'item/:id',
      component: ChildA,
      props: true
    }
  ]
}
  • Параметр :id становится доступен через объект route.params.
  • Свойство props: true позволяет передавать параметр как пропс в компонент, упрощая работу с данными.

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

Именованные маршруты облегчают навигацию и генерацию ссылок через router-link или программно:

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'child-a',
      name: 'child-a',
      component: ChildA
    }
  ]
}

Навигация через name:

router.push({ name: 'child-a' })

Или в шаблоне:

<router-link :to="{ name: 'child-a' }">Перейти к Child A</router-link>

Абсолютные и относительные пути

По умолчанию путь дочернего маршрута относительный, но можно использовать абсолютный путь:

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: '/special',
      component: ChildB
    }
  ]
}
  • Абсолютный путь (/special) игнорирует путь родителя.
  • Использование относительных путей предпочтительно, если требуется иерархия URL, соответствующая структуре компонентов.

Вложенные маршруты нескольких уровней

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

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'child-a',
      component: ChildA,
      children: [
        {
          path: 'grandchild',
          component: () => import('./components/GrandChild.vue')
        }
      ]
    }
  ]
}
  • Для каждого уровня вложенности требуется <router-view> в родительском компоненте.
  • Такой подход позволяет строить модульные страницы с динамическими подстраницами.

Named Views и children

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

{
  path: '/parent',
  components: {
    default: Parent,
    sidebar: Sidebar
  },
  children: [
    {
      path: 'child-a',
      components: {
        default: ChildA,
        sidebar: ChildSidebar
      }
    }
  ]
}
  • Каждое имя области соответствует <router-view name="имя"> в родительском компоненте.
  • Вложенные маршруты могут переопределять отображение только в нужных областях.

Lazy Loading дочерних маршрутов

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

{
  path: 'child-a',
  component: () => import('./components/ChildA.vue')
}
  • Компонент будет загружен только при переходе на соответствующий маршрут.
  • Особенно полезно для многоуровневых вложенных маршрутов в крупных приложениях.

Переходы и навигация внутри children

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

  • Программная навигация: router.push('/parent/child-a') или по имени.
  • Навигация через <router-link>: используется относительный путь или имя.
  • Динамическая смена компонентов: родительский <router-view> обновляется без перезагрузки всей страницы.

Резюме ключевых правил

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

Хотите, я подготовлю наглядную схему вложенных маршрутов с примером работы <router-view> и динамических children для наглядного учебника? Это сильно помогает понять структуру.

Оглавление