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 new object {}.

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

Thanks in advance

Answer 1

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"}