Vue-router: Passing params via $router.push does not seem to work at all

[balint42]

Version

2.7.0

Reproduction link

https://github.com/balint42/vue-router/commit/22971e46c122eef9c47afe4817f2977923269213

Steps to reproduce

First clone the fork through the link I provided and checkout my commit. Run the router examples via npm run dev and in the browser (Chrome 64-bit Version 60 Linux) click the first "basic" example. What you will see is that when programmatically navigating to /foobar/... (happens 2s after mount) the params are missing in the new component being navigated to, when navigating via link they are present.

What is expected?

The params passed via push should be present in the new component being navigated to as $route.params and should be passed as props.

What is actually happening?

The params passed via push are not present in the new component being navigated to as $route.params and are not being passed as props.

---

I tried to verify the correct usage by looking at

https://github.com/vuejs/vue-router/blob/6f93fc91a2315292811b73798d0b4565b8d4a511/types/test/index.ts#L139

https://github.com/vuejs/vue-router/blob/e768e4a9d37b974efaf13388a443706627df6e78/docs/en/essentials/navigation.md

[posva]

if you specify the path property, you have to add manually the params. Use a named route to specify the params

[balint42]

Thanks for explaining!

Can we discuss how to better document this? To me it was not clear from the docs that path cannot be combined with params - Vue does do merging magic in various other contexts, e.g. mixins. And query can be combined with path.

It should be mentioned in the programmatic navigation section imho.

[posva]

Indeed, it's not the first time it happens, I created a PR, make sure to leave any thoughts about it to make sure it's clear 🙂

[balint42]

Thanks for your additions, I think they do make clear how params work. I made some comments on typos in the pr.

👍

[sneko]

Is there a way to pass data from one view to another without injecting it in the URL?

I mean, on my Login page I have a flashMessage variable and for some reason other view can use it when redirecting the user to the Login page. But I don't want it changes the URL.

Thank you,

[janswist]

if you specify the path property, you have to add manually the params. Use a named route to specify the params

How do you manually add the params? Is there some kind of constructor?

[posva]

You must construct the path string yourself. Imagine a route { path: '/users/:id', name: 'users' }, you must do: { path: '/users/' + this.id }. But it's recommended to use the name instead if possible: { name: 'users', params: { id: this. id }} as this will handle encoding and other things

[manojmkv]

this.$router.push({ name: "output", params: { searchResults: this.searchResults} });
Here in output component you need to create a Prop with name of "searchResults" and thats it. In that prop you will get this.searchResults value.