Vue NavigationDuplicated Error

Many developers have encountered this error while working on projects in Vue.js. 

There are certain scenarios in which this error is reported. Let’s take a look at some such cases.First case is when you try to fix vue-router version to 3.0.7 or below. This problem has no solution so make sure you don’t upgrade vue-router.

Case 2: The error pops up when navigated to the same page with different parameters. 

The error message appears because Vue.js router put it after version 3.1. $router.push() method changed to Promise. If there is no callback function the error message passed to global routing error processing. Thus the above error appears.The possible solution to the problems are the following.

After introducing the vue router in main.js or in any other file if route is extracted separately copy and paste the below line of code.


import Router from 'vue-router'


const originalPush = Router.prototype.push

Router.prototype.push = function push(location, onResolve, onReject) {

  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)

  return originalPush.call(this, location).catch(err => err)

}


This code will prevent global error handling printing.


Another solution is to add a callback function for each router.push as shown below.


router.push('/location').catch(err => {err})


The problem with this solution is that it will not show any error if there is any route after push.