Vue.jsネストされたルートで、親ルートから子ルートにデータを渡すにはどうすればよいですか？

Question

Vue.jsアプリケーションでネストされたルーティングを使用しようとしています。私はルーティングが働いていますが、親ルートから子ルートにデータを渡す方法を理解することはできません。

基本的に、親ルートはプロパティを持つオブジェクトを取得します。特定のネストされた各子ルートについて、そのオブジェクトのプロパティの1つを表示したいとします。例えば

私は以下のオブジェクトがある場合、：

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

を私は子供のルート「：ID /プロファイル/ユーザー/」に「プロファイル」変数を渡したいと思います。 "/ user /：id/posts"の場合、 "post"変数を渡したいと思います。

私はこれを小道具を使って実現できると思っていましたが、ルーティングと適合する例は見つかりませんでした。私が試したことはうまくいかない。

ここに私がしようとしているもののjsfiddleへのリンクがあります。

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

Answer 1

あなたが作成サービスを使用してデータを取得することができます。与えられた例では、ドキュメントに表示されている「ナビゲーション後のデータのフェッチ」サンプルに従うように更新しました。ユーザーのプロファイルの取得を処理するuserServiceがあります。

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

その後、私はそれが作成されます時にプロファイルを取得するためのUserProfileのコンポーネントを更新し、それが変更$routeを監視します。 props: []ようにそれを通過するためとして

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' } 
} 

私は道を見ていないが、それはかなり複雑な取得を開始可能性があるため、それはおそらく良いことです。ここでは、ユーザープロフィールがどこから来ているのかを明示的に知っています。ウサギの穴に追随する必要はありません。

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