Pass custom data to `$router.push()` in vue-router

Slim picture Slim · Oct 4, 2018 · Viewed 14.7k times · Source

Is there a way to pass additional data to $router.push() that is not registered as param or query in the route's path. This will allow me to recognize on the next page that it has been accessed via programmatic navigation as there is no way to pass it via URL. Something like:

this.$router.push({
   path: '/next-page', 
   params: {...}, 
   query: {...}, 
   moreData: {foo: 1}
})

And then in /next-page:

this.$route.moreData.foo // 1

Currently I am using the $store to handle moreData

Answer

Slim picture Slim · Oct 4, 2018

I found the solution. There is a Note in the Vue-router docs that says:

Note: params are ignored if a path is provided ... Instead, you need to provide the name

So we are allowed to pass custom data to params if we navigate using route's name like so:

$router.push({name: 'next-page', params: {foo: 1}})

// in /next-page
$route.params.foo // 1