Vue.js - パラメータを子ルートに渡す

Question

私はVue.jsアプリケーションを持っています。このアプリはvue-routerを使用したビューを表示します。アプリケーションが起動すると、サーバーからキーを取得する必要があります。そのキーを子ビューに渡したいと思っています。問題を示すために、私はこれを設定しましたFiddle。このように、この質問に関連するコード：私はこのアプリを実行すると

var Page1 = { template: '<div><h3>Page 1</h3><p>Number: {{ number }}</p></div>', props: [ 'number' ] }; 
var Page2 = { template: '<div><h3>Page 2</h3><p>Number: {{ number }}</p></div>', props: [ 'number' ] }; 

var routes = [ 
    { path: '/page-1', component: Page1 }, 
    { path: '/page-2', component: Page2 } 
]; 

var router = new VueRouter({ 
    routes 
}); 

var app = new Vue({ 
    router, 
    el: '#app', 
    data: { 
    num: 0 
    }, 
    created: function() { 
    var self = this; 
    setTimeout(function() { 
     self.num = 1; 
    }, 100); 
    } 
}); 

、私は子ビューapp.numが設定されます（Page1とPage2）にapp.numを「合格」するかどうかはわかりません。私は "passing props to route components"ドキュメントに記載されているアプローチを使用してみました。しかし、このアプローチは、作成後にロードされるデータに対しては機能していないようです。私は何が欠けていますか？

Answer 1

あなたはこのようrouter-viewを通じて子供に親コンポーネントから値をバインドすることができます。

<router-view :number="num"></router-view>