Vuejs通过路由器将数据作为道具传递给组件答案

【问题标题】：Vuejs passing data as props to component via routerVuejs通过路由器将数据作为道具传递给组件
【发布时间】：2018-09-20 12:25:03
【问题描述】：

我想将一个 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 }),
}

我的 props 已经设置了联系人的 id

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

只需将 props: true 添加到您的 router.js 中的路由，如下所示：

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

【讨论】：

感谢您的回答，我编辑了关于道具的帖子