CODEWITHSUNDEEP
javascriptvue.jsvue-router
Taner
Taner

Reputation: 75

How do I pass data to another component using Vue router?

Currently, I have a component that is rendered on the page, when I console log the this.$router variable inside the component, i see the full path property is equal to '/hello/reports?report=3849534583957' and the path property is equal to just '/hello/reports/'.

In a separate component I am trying to pass data to the component above by using

this.$router.push({path:`/hello/reports?report=3849534583957`, params: {data: 'hey'}})`

However, when I try to look at the params in the vue devtools or by console logging this.$route.params.data it returns me undefined.

I believe I am doing everything correctly, please help me understand where I am going wrong. I have tried replacing the full path property's value with just the regular path property's value, inside the push method as well. Thank you

Upvotes: 0

Views: 32

Answers (1)

RoboKozo
RoboKozo

Reputation: 5062

Router params map to values that are setup in the router configuration.

const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

id is a valid param for this route.

Find more on the official docs: https://router.vuejs.org/guide/essentials/dynamic-matching.html#dynamic-route-matching

Upvotes: 1

Related Questions