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 时如何将app.num“传递”给子视图（Page1 和Page2）。我尝试使用“passing props to route components”文档中提到的方法。但是，这种方法似乎不适用于创建后加载的数据。我错过了什么？

Answer 1

您可以通过router-view 将父组件中的值绑定到子组件，如下所示：

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