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

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 元素中绘制组件。

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

原文由 Robert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<router-view :some-value-to-pass="localValue"></router-view>

并在您的组件中添加道具：

 props: {
      someValueToPass: String
    },

vue-router 将匹配组件中的 prop

原文由 lukpep 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

遗憾的是，没有一个上一个解决方案实际上回答了这个问题，所以这是来自 quora 的一个

基本上 文档 没有很好解释的部分是

当 props 设置为 true 时， route.params 将被设置为组件 props。

所以通过路由发送道具时你真正需要的是将它分配给 params key ex

 this.$router.push({
    name: 'Home',
    params: {
        theme: 'dark'
    }
})

所以完整的例子是

// component
const User = {
  props: ['test'],
  template: '<div>User {{ test }}</div>'
}

// router
new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      name: 'user',
      props: true
    }
  ]
})

// usage
this.$router.push({
    name: 'user',
    params: {
        test: 'hello there' // or anything you want
    }
})

原文由 ctf0 发布，翻译遵循 CC BY-SA 4.0 许可协议