vue.js - Vue-router によってインスタンス化された Vue.js コンポーネントに props を渡す

Question

次のような Vue.js コンポーネントがあるとします。

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

そして、vue-router のルートが次のように一致する場合に使用したいと思います。

router.map({
    '/bar': {
        component: Bar
    }
});

通常、「myProps」をコンポーネントに渡すには、次のようにします。

Vue.component('my-bar', Bar);

そしてhtmlで：

<my-bar my-props="hello!"></my-bar>

この場合、ルートが一致すると、ルーターは router-view 要素内のコンポーネントを自動的に描画します。

私の質問は、この場合、小道具をコンポーネントに渡すにはどうすればよいですか?