CODEWITHSUNDEEP
vue.jsvue-router
Nil
Nil

Reputation: 79

Vuejs passing data as props to component via router

I would like to passe an Id from my component to another that is not related as parent or child. I'm on a profile page and by clicking on a button it brings me to a message page.

The way I do to go to another page : 

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

On my message component I should receive the ID of the contact in this props :

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

I tried this way as try exemple to see if datas are passing, from contact page component to the message component :

data(){
   sendTo: {
      to: [{
        contact: {
          email: '[email protected]',
          first_name: 'exemple',
          last_name: 'exemple',
          _id: '12'
        },
        type: 'contacts'
      }]
    }
}

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

But it's not working, is there something wrong in what I do, am I forgetting something or is it just totally the wrong way ?

[EDIT]

My route is set like this : 

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

My props is already set with the id of the contact

Upvotes: 0

Views: 393

Answers (1)

Ayush Gupta
Ayush Gupta

Reputation: 114

Just add props: true to your route in your router.js like this:

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

Upvotes: 1

Related Questions