Передача входных параметров компонентам маршрута
Использование $route или useRoute() в компоненте создает тесную связь с маршрутом, что ограничивает гибкость компонента, так как его можно использовать только на определенных URL-адресах. Хотя это не обязательно плохо, мы можем изменить это поведение с помощью опции props:
Давайте вернемся к нашему предыдущему примеру:
маршрутизатор:
Мы можем устранить прямую зависимость от $route в User.vue, объявив вместо этого входной параметр:
Затем мы можем настроить маршрут на передачу параметра id в качестве входного параметра, установив props: true:
Это позволяет использовать компонент в любом месте, что облегчает его повторное использование и тестирование.
Логический режим
Если props имеет значение true, то в качестве входных параметров компонента будут установлены route.params.
Именованные представления
Для маршрутов с именованными представлениями необходимо определить опцию props для каждого именованного представления:
Объектный режим
Если props является объектом, то именно его свойства будут установлены как входные параметры компонента. Полезно для случаев, когда входной параметр статичен.
Функциональный режим
Можно создать функцию, возвращающую входные параметры. Это позволяет приводить параметры к другим типам, комбинировать статические значения со значениями, основанными на маршрутах, и т.д.
URL /search?q=vue будет передавать {query: 'vue'} в качестве входных параметров компоненту SearchUser.
Постарайтесь, чтобы функция props не имела состояния (была stateless), поскольку она выполняется только при изменении маршрута. Если для определения входных параметров требуется состояние, используйте компонент-обертку, тогда Vue сможет реагировать на изменения состояния.
Через RouterView
Вы также можете передать любые входные параметры через слот <RouterView>:
Предупреждение
В этом случае все компоненты представления получат view-prop. Обычно это не очень хорошая идея, поскольку означает, что все компоненты представления объявили у себя входной параметр view-prop, что не всегда верно. По возможности, используйте один из вышеуказанных вариантов.