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

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.

[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()
});

[worlddeleteRin]

If someone need to change just query in url on the same page and get around NavigationDuplicated error, you need to create new Object from route.query, not just reference it. So, for example:

// this may not work
var new_query = this.$route.query
new_query['new_key'] = 'new_value'
this.$router.push({path: route.path, query: new_query  })

// this will work
var new_query = {...this.$route_query }
new_query['new_key'] = 'new_value'
router.push({path: route.path, query: {...new_query } })

@posva, reply please, is this a good workaround, cause i spend a lot time searching useful information, a lot of people stack on this