将道具传递给Vue-router实例化的Vue.js组件

梅乐2020-03-11

假设我有一个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元素中绘制组件。

我的问题是，在这种情况下，如何将道具传递给组件？