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

Question

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

What does your router config look like?

RoboKozo
– RoboKozo

2021-03-31 21:41:01 +00:00
Commented Mar 31, 2021 at 21:41 — RoboKozo
– RoboKozo, Commented Mar 31, 2021 at 21:41

RoboKozo · Accepted Answer · 2021-03-31 21:43:34Z

1

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

answered Mar 31, 2021 at 21:43

RoboKozo

5,1125 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related