Vue.js - Übergabe von Parametern an eine untergeordnete Route

Question

Ich habe eine Vue.js App. Diese App zeigt Ansichten mit dem vue-router. Wenn die App gestartet wird, muss ich einen Schlüssel vom Server abrufen. Ich möchte dann diesen Schlüssel an die untergeordneten Ansichten übergeben. Um das Problem zu demonstrieren, habe ich dieses Fiddle eingerichtet. Der Code im Zusammenhang mit dieser Frage wie folgt aus:

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); 
    } 
}); 

Wenn ich diese App laufen, ich bin nicht sicher, wie man „übergeben“, um die app.num den Kinderblick (Page1 und Page2), wenn app.num gesetzt wird. Ich habe versucht, den Ansatz zu verwenden, der in den Dokumenten "passing props to route components" erwähnt ist. Dieser Ansatz scheint jedoch nicht für Daten zu funktionieren, die nach der Erstellung geladen werden. Was vermisse ich?

Answer 1

Sie können Werte binden von der übergeordneten Komponente an das Kind über die router-view wie folgt aus:

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