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:          


        

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