Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NavigationDuplicated on navigating to the same page with different params (confirmed) #3013

Closed
orrd opened this issue Oct 30, 2019 · 4 comments

Comments

@orrd
Copy link

@orrd orrd commented Oct 30, 2019

Version

3.1.3

Reproduction link

https://codesandbox.io/s/vue-template-ujrqt

Steps to reproduce

  • Configure a route with any static path and also set props: true

  • Call this.$router.push() on that route with params set to some value.

  • Call this.$router.push() on that route with params set to some other value.

  • A NavigationDuplicated error is thrown even though the params are different.

What is expected?

A route push should not be considered NavigationDuplicated if the params are different.

What is actually happening?

A NavigationDuplicated is generated even though the params are different.


Yes, this is the same issue as #2884 and also mentioned by others, but this is confirming it with the reproduction example. I think the reason why @posva wasn't able to reproduce it is he may have used the param as part of the path, which does cause this issue not to happen. But params aren't always used in the path, sometimes the params are used as props for the component (https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode).

I would also like to re-propose the same solution that some others have suggested in the comments of the other issues of adding an option to turn off NavigationDuplicated errors entirely. It's clear that NavigationDuplicated errors aren't wanted by a large number of Vue-Router users. If the option to turn off NavigationDuplicated errors isn't enabled by default, adding that option wouldn't be a breaking change, so that can be implemented in the current 3.x versions without waiting for 4.x.

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Oct 31, 2019

Thanks for providing a repro, now I can see what was wrong: Passing state in params (which is not supported) produces the same exact url and therefore, a duplicated navigation, so this is expected behavior and I discourage you from passing arbitrary state like that. In the future this won't work but there is a big change of being able to use history state to pass other kind of information to be stored alongside the history entry. For everything else I already replied at #2881 (comment)

@posva posva closed this Oct 31, 2019
@orrd

This comment has been minimized.

Copy link
Author

@orrd orrd commented Oct 31, 2019

Ok, I didn't realize that params shouldn't be used for passing state that doesn't change the URL. As far as I know, that isn't mentioned on the "Programmatic Navigation" page in the docs when it talks about using params.

@andreasvirkus

This comment has been minimized.

Copy link

@andreasvirkus andreasvirkus commented Nov 4, 2019

I am experiencing this error in my app as well, but I don't use any route params that aren't represented in the route's path. I couldn't modify the provided codesandbox to replicate my issue, but will try again later tonight.

@posva I can imagine it's hard to manage all these issues popping up around the same behaviour, but if the community is struggling, then maybe there's a better way to handle this (e.g. a cookbook or a guide on best practises to avoid this) instead of locking and closing various issues, leaving users in the dark 🤔

If I manage to replicate this, can I post the REPL here and ask to reopen this issue or should it go under a separate issue?

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Nov 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.