Vue.js通过路由器将数据作为道具传递给组件

时间:2018-09-20 12:25:04

标签: vue.js vue-router

我想将一个ID从我的组件传递给另一个与父母或孩子无关的ID。 我在个人资料页面上,通过单击按钮将我带到消息页面。

我转到另一页的方式:

this.$router.push({ name: `messages_new` });

在我的消息组件中,我应该在此道具中收到联系人的ID:

props: {
      sendTo: {
        type: Object,
        default: () => ({
          to: []
        }),
        description: 'Pre fill the send field with this receivers formatted {contact, type}'
      }
    },

我尝试了这种方式,例如尝试查看数据是否从联系人页面组件传递到消息组件:

data(){
   sendTo: {
      to: [{
        contact: {
          email: 'exemple@9online.fr',
          first_name: 'exemple',
          last_name: 'exemple',
          _id: '12'
        },
        type: 'contacts'
      }]
    }
}

`this.$router.push({ name: `message_new`, params: { sendTo: this.sendTo} });`

但是它不起作用,我做的事情有什么问题吗,我忘记了什么还是只是完全错误的方式?

[编辑]

我的路线设置如下:

{
    name: 'profile',
    path: '/profile/:id',
    component: Profile,
    props: (route) => ({ id: route.params.id || null }),
}

我的道具已经设置了联系人的ID

1 个答案:

答案 0 :(得分:1)

只需添加props:true即可在router.js中添加如下路由:

{ path: '/Profile', name: 'Profile', component: load('ProfileComponent'), props: true}