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

Question

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

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

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

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

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

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

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

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

Answer 1

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

const userService = { 
    findProfile(id) { return 'Profile Data'; } 
}; 

Затем я обновил компонент UserProfile получить профиль, когда он создан, и он следит за $route для изменений.

const UserProfile = { 
    data() { return { profile: null } }, 
    template: '<div>Profile {{ $route.params.id }} {{ profile }}</div>', 
    methods: { 
    setProfile: function() { this.profile =  userService.findProfile(this.$route.params.id); } 
    }, 
    created: function() { this.setProfile(); }, 
    watch: { '$route': 'setProfile' } 
} 

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

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