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 #2881 (comment)

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

[pulzzedavid]

This seems to happen when you are modifying your current query object and using it to push to a new route either directly or by reference. If you create a new query object, you should not see this issue.

[posva]

@pulzzedavid the $route object is readonly so one is expected to copy objects like query and params

[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

[plenques]

thank you @worlddeleteRin @pulzzedavid
solved my problem :D!

[usmanarain350]

You can do it using the Watch property to check if params change the variable value by doing this in the below example.

This is typescript syntax

watch(
() => route.params.view, // first param, your object
(currValue, prevValue) => {
// second param, watcher callback
changeValue(currValue); //changeValue is a function

}
)

[kirkbushell]

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 is a good suggestion, but it didn't seem to work for me. I can't seem to get around navigation duplicated, even with an entirely fresh json object for the query params.