Как вы можете передавать данные из родительского маршрута в дочерний маршрут во вложенных маршрутах Vue.js?

Я пытаюсь использовать вложенную маршрутизацию в своем приложении Vue.js. У меня работает маршрутизация, однако я не могу понять, как передать данные с родительского маршрута на дочерний маршрут.

По сути, родительский маршрут будет извлекать объект со свойствами. Для каждого конкретного вложенного дочернего маршрута я хочу показать одно из свойств этого объекта.

Например, если у меня есть объект ниже:

myDataObject : {name : "Foo" , profile : "Profile Data", posts : "Posts Data" }

Я хотел бы передать переменную «профиль» дочернему маршруту «/user/:id/profile». В случае «/user/:id/posts» я хотел бы передать переменную «post».

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

Вот ссылка на jsfiddle того, что я пытаюсь сделать.

http://jsfiddle.net/90q4sucj/2/


javascript vue-router
person Dave    schedule 06.01.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Правильный ответ см. в ответе ниже

! Вы можете получать данные с помощью созданных вами служб. В приведенном примере я обновил его, чтобы следовать примеру «выборки данных после навигации», показанному в документах. У него есть userService, который будет обрабатывать получение профиля пользователя.

! const userService = { findProfile(id) { return 'Данные профиля'; } }; ! Затем я обновил компонент UserProfile, чтобы получить профиль при его создании, и он отслеживает изменения $route.

! const UserProfile = { data () { return { profile: null } }, template: 'Profile {{ $route.params.id }} {{ profile }}', методы: { setProfile: function () { this.profile = userService.findProfile(this.$route.params.id); } }, создано: функция () { this.setProfile(); }, смотрите: { '$ route': 'setProfile' } }

! Что касается передачи его как props: [], я не видел способа, но это, вероятно, хорошо, потому что это может стать довольно запутанным. Здесь вы точно знаете, откуда берется профиль пользователя, и вам не нужно ходить по кроличьей норе, чтобы понять это.

! http://jsfiddle.net/90q4sucj/3/

person Stephen    schedule 06.01.2017
comment
Спасибо, Стивен. Я думаю, что понимаю ваш ответ, однако, не могли бы вы прояснить несколько вещей? Я ошибаюсь, думая, что данные должны передаваться от родителя к ребенку? Вместо этого служба должна обрабатывать выборку данных, а затем передавать их во вложенные маршруты? - person Dave; 06.01.2017
comment
Передача его от родителя к дочернему имеет смысл, когда вы не переходите к дочернему. Если дочерний элемент используется для составления родителя, вы должны передать свойства. В этом случае родительский компонент User не нуждается в компоненте UserProfile для выполнения своей работы. - person Stephen; 06.01.2017
comment
Кроме того, вы можете сделать UserService умным, чтобы ограничить вызовы API. Возможно, когда родительский пользователь запрашивает пользователя, вы сохраняете его на карте, чтобы он был доступен локально. Конечно, это потребует истечения срока действия кеша через определенное время, чтобы у вас не было устаревших данных. - person Stephen; 06.01.2017
comment
@Stephen Спасибо за исправление вашего ответа, это сэкономило мне много времени. - person whoacowboy; 16.06.2020

arrow_upward
16
arrow_downward

Это определенно выполнимо с props.

В родительском компоненте

<template>
...
<router-view :profile="myDataObject.profile" />
...
</template>

В дочернем компоненте

<script>
export default {
  name: "child",
  props: ["profile"]
...

Теперь в вашем дочернем компоненте вы можете получить доступ к данным, обратившись к this.$props.profile.

Я использую этот шаблон с Vue 2.5.16. и Vue Router 3.0.1.

PS: хороший вариант — также использовать vuex для таких сценариев.

person jedik    schedule 19.07.2018