title: Passing props to Vue.js components instantiated by Vue-router
body: <p>Suppose I have a Vue.js component like this:</p>
  
  <pre><code>var Bar = Vue.extend({
      props: ['my-props'],
      template: '&lt;p&gt;This is bar!&lt;/p&gt;'
  });
  </code></pre>
  
  <p>And I want to use it when some route in vue-router is matched like this:</p>
  
  <pre><code>router.map({
      '/bar': {
          component: Bar
      }
  });
  </code></pre>
  
  <p>Normally in order to pass 'myProps' to the component I would do something like this:</p>
  
  <pre><code>Vue.component('my-bar', Bar);
  </code></pre>
  
  <p>and in the html:</p>
  
  <pre><code>&lt;my-bar my-props="hello!"&gt;&lt;/my-bar&gt;
  </code></pre>
  
  <p>In this case, the router is drawing automatically the component in the router-view element when the route is matched.</p>
  
  <p>My question is, in this case, how can I pass the the props to the component?</p>