CODEWITHSUNDEEP
javascripthtmlvue.jsroutesvuetify.js
Alex Denor
Alex Denor

Reputation: 137

How can I pass a variable when calling a route?

I want to display the customer's name in a new vue page(from Messages.vue to CustomerMessages.vue). I don't know how to pass this variable into the child vue.

I have tried props but it doesn't work as I expected. 

{ path: '/messages/:id/customers', component: CustomerMessages, name: 'CustomerMessage', beforeEnter: requireAuth }

this.$router.push({ name: 'CustomerMessage', params: { id: item.ID }, data: {name: this.customers.FullName} })

{{name}}

props:{
name: ''
}

Upvotes: 0

Views: 80

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

Vue-router doesn't let you pass arbitrary data to routes like that.

If you want a parent component to share some data with a child route, then you can just bind it on the <router-view> component like you would with any other component prop.

Parent

<router-view :name="name"></router-view>

data() {
  return {
    name: 'Alice'
  }
}

Child

{{ name }}

props: ['name']

Upvotes: 2

Related Questions