Передача props в дочерние маршруты

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

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

В Vue Router вложенные маршруты определяются с помощью свойства children в объекте маршрута. Каждый дочерний маршрут может иметь собственный компонент и собственные props:

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

const routes = [
  {
    path: '/parent/:id',
    component: Parent,
    props: true, // передаем параметры родительского маршрута
    children: [
      {
        path: 'child',
        component: Child,
        props: route => ({ parentId: route.params.id }) // передаем параметр родителя в дочерний маршрут
      }
    ]
  }
]

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

export default router

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

Свойство props дочернего маршрута может быть:
- Булевым (true или false)
- Объектом
- Функцией, возвращающей объект
Функция получает объект route и позволяет динамически формировать props на основе параметров маршрута, query-параметров или других данных.

Булевое значение `props`

Если props установлено в true, все параметры маршрута (params) автоматически передаются в компонент как props. Это удобно для маршрутов с динамическими сегментами:

{
  path: 'child/:childId',
  component: Child,
  props: true
}

В этом случае компонент Child будет получать prop childId напрямую, а не через this.$route.params.childId.

Объект как props

Можно задать статические props через объект. Эти значения будут переданы компоненту вне зависимости от параметров маршрута:

{
  path: 'child',
  component: Child,
  props: { staticValue: 42 }
}

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

Функция как props

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

{
  path: 'child',
  component: Child,
  props: route => ({
    parentId: route.params.id,
    queryParam: route.query.someValue || null
  })
}

Преимущества:

Возможность использовать одновременно params и query
Легко формировать props на основе условий
Изоляция компонента от глобального роутера

Передача props через родительский компонент

При использовании <router-view> в родительском компоненте можно дополнительно передавать props дочернему маршруту через v-slot:

<template>
  <router-view v-slot="{ Component, route }">
    <component :is="Component" :parent-id="route.params.id" />
  </router-view>
</template>

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

Обработка изменения параметров маршрута

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

params в props — изменение маршрута с новым параметром перерисует компонент с новым prop
params через this.$route.params — компонент должен отслеживать изменения вручную через watch на $route

Использование props упрощает реактивность компонентов и уменьшает связанность с роутером.