How to use vue-router params

Question

I'm new to Vue now working with its router.

I want to navigate to another page and I use the following code:

this.$router.push({path: '/newLocation', params: { foo: "bar"}});

Then I expect it to be on the new Component

this.$route.params

This doesn't work. I also tried:

this.$router.push({path: '/newLocation'});
this.$router.push({params: { foo: "bar"}});

I've inspected the source code a bit and noticed this property gets overwritten with a new object {}.

I'm wondering is the params use is other than I think? If not, how to use it?

instead of pushing to path, push to name, then it will work. — Ricky-U
– Ricky-U, Commented Jul 2, 2020 at 16:59

cengsemihsahin · Accepted Answer · 2023-01-15 20:10:49Z

59

Since you want to pass params to the component of the respective route you route object's path property should have a dynamic segment denoted by : followed by the name of the key in your params object

so your routes should be

routes: [
    {path: '/newLocation/:foo', name: 'newLocation', component: newComponent}
]

Then for programmatically navigating to the component you should do:

this.$router.push({name: 'newLocation', params: { foo: "bar"}});

See that I am using name of the route instead of path as you are passing params by the property params.

if you want to use path then it should be:

this.$router.push({path: '/newLocation/bar'});

by the path approach the params will automatically map to corresponding fields on $route.params.

Now if you console.log(this.$route.params) in your new component you will get the object : {"foo": "bar"}

edited Jan 15, 2023 at 20:10

cengsemihsahin

9753 gold badges10 silver badges23 bronze badges

answered Jul 25, 2017 at 8:38

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

3 Comments

Ferrybig Over a year ago

I don't know is Vue router worked differently in 2017, but now Vue router requires props: true on the route to even start parsing the :foo parts of the url

Wang'l Pakhrin Over a year ago

Thanks for clarifying, I missed this.$router.params. I was assuming that when the param is passed, I can catch that param automatically when it's declared under data

Amit K. Over a year ago

I am using name but still getting params as empty on target page .

MaksymK · Accepted Answer · 2018-06-10 12:37:03Z

24

Try using query instead of params

this.$router.push({path: '/newpath', query : { foo: "bar"}});

And in your component

console.log(this.$route.query.foo)

answered Jun 10, 2018 at 12:37

MaksymK

4013 silver badges7 bronze badges

3 Comments

tazboy Over a year ago

Works but it makes a weird URL. Since I'm passing an object it shows http://...?player=%5Bobject%20Object%5D. Any way to not have it do that?

lbris Over a year ago

@tazboy Did you find the way to solve it ? I also use an object as a prop for my route and in the URL, if my object has a 'name' field, I'd like to display it in the URL instead of the %5Bobject%20Object%5D

tazboy Over a year ago

I used localStorage to store what I needed instead of passing it using query. Much easier to use.

Keith Harris · Accepted Answer · 2020-07-21 08:03:54Z

The easiest way I've found is to use named routes along with the params options. Let's say you have a router file that looks like this:

And you want to reach the "movie" page with some ID. You can use Vue's router link component (or Nuxt's link component) to reach it like this:

Vue:

<router-link :to="{ name: 'movie', params: { id: item.id } }">{{ item.title }}</router-link>

Nuxt:

<nuxt-link :to="{ name: 'movie-id', params: { id: item.id } }">{{ item.title }}</nuxt-link>

Note that the name parameter must match the "name" attribute of the desired route in the router file. And likewise, the parameter name must match.

Nuxt creates the route file for you automatically when you create a new page. To see what name Nuxt gives its routes, go to the .Nuxt folder in your project and look for a "router.js" file

tony19 · Accepted Answer · 2022-07-15 05:16:49Z

0

Isn't it generally considered an anti pattern to bind the properties to the router?

It's a much more DRY solution to have them bind to the component it's self, which I actually believe the Vue router does. Please see: https://router.vuejs.org/en/essentials/passing-props.html for more info on the best practices here

Can you try accepting the property in the props: [] property of your component? You can see how to do that here: https://v2.vuejs.org/v2/guide/components.html#Props

Please do pop up if you have any questions! Happy to help further.

edited Jul 15, 2022 at 5:16

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 25, 2017 at 7:24

ExohJosh

1,89216 silver badges23 bronze badges

2 Comments

Gal Ziv Over a year ago

I want to pass params form one view to another. sounds ok to me. when giving the route a name and then executing 'this.$router.push({path: '/newLocation', name: 'newRouteName', params: { foo: "bar"}});' did the trick and now i can access the params on my new loaded view via: this.$route.params. thanks for you time and effort!

Gal Ziv Over a year ago

one more thing, I can't see a reason why it must be named for it to work. do you have an idea?

Collectives™ on Stack Overflow

How to use vue-router params

4 Answers 4

3 Comments

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related