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

Question

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 1

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