Vue-router: NavigationDuplicated on navigating to the same page with different params (confirmed)

[orrd]

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]

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 https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378

[orrd]

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]

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]

I know, that's why I invested so much time in explaining things in issues. The documentation should talk about the promise api in the programmatic navigation section, I haven't done that yet
A separate issue is better, thanks

Eduardo San Martin Morote

On 4 Nov 2019, at 10:08, andreas [e-mail] wrote:


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?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[maogongzi]

I encountered the same issue which I have to pass some states around the query params, I know that @posva has pointed out that it's not recommended solution, but for someone that still needs to do it, for example maintain some legacy projects or simply for the sake of backward compatibility, you can push(didn't tested) or replace(tested) the same route, only need to pass a random key like timestamp inside the query params, in that way the route becomes a "different" one, and will not trigger the NavigationDuplicated error, in most cases the random key does no harm to the project if you just ignore it while resolving the params, for example:

this.$router.replace({
  // same name route
  name: "group",
  query: {
    // your new query params here, if any
    ...someNewParams,

    // the random key that I'm using, any uuid should do the trick, only to make the whole
    // route "different"
    _randomKey: new Date().time()
});