Passing props to Vue.js components instantiated by Vue-router : <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>
