Vue.js - Passing Parameters to a child route

Question

I have a Vue.js app. This app shows views using the vue-router. When the app starts, I need to retrieve a key from the server. I then want to pass that key to the child views. To demonstrate the problem I've setup this Fiddle. The code related to this question like this:

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

When I run this app, I'm not sure how to "pass" the app.num to the child views (Page1 and Page2) when app.num gets set. I tried using the approach mentioned in the "passing props to route components" docs. However, that approach doesn't seem to work for data that is loaded after creation. What am I missing?

Answer 1

You can bind values from the parent component to the child via the router-view like this:

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