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>