vue error 'Avoided redundant navigation to current location' when trying to reload page wi-CodePudding

I'm trying to reload page with new params on state changed:

@Watch('workspace')
onWorkspaceChanged(o: Workspace, n: Workspace){
  if(o.type === n.type && o.id === n.id) return;
  this.$router.push({name: this.$route.name as string, params: {id: `${n.id}`, type: `${ n.type == WorkspaceType.COMPANY ? COMPANY : PERSON }`}});
}

but receive error Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "previous location".

I expect path to be changed from /profile/c/123, where 'c' is type param and 123 is id param, to /profile/p/321 and vice versa

CodePudding user response：

One way to fix this error is to check if the new params are different from the current route params before calling the push method on the router. This can be done by comparing the n.id and n.type values with the this.$route.params.id and this.$route.params.type values respectively. If the values are different, then you can call the push method on the router to navigate to the new route with the updated params, otherwise you can do nothing.

Here is an example:

@Watch('workspace')
onWorkspaceChanged(o: Workspace, n: Workspace){
// Check if the new params are different from the current route params
if (n.id !== this.$route.params.id || n.type !== this.$route.params.type) {
this.$router.push({name: this.$route.name as string, params: {id: ${n.id}, type: ${ n.type == WorkspaceType.COMPANY ? COMPANY : PERSON }}});
}
}

This way, the push method on the router will only be called when the new params are different from the current route params, avoiding the "redundant navigation" error.

CodePudding user response：

You should use the "replace" method instead of "push" in the router.push call:

this.$router.replace({name: this.$route.name as string, params: {id: `${n.id}`, type: `${ n.type == WorkspaceType.COMPANY ? COMPANY : PERSON }`}});