解决 vue-router 报 NavigationDuplicated 错误

解决 vue-router 报 NavigationDuplicated 错误

控制台报错：

原因：
vue-router 在3.1版本以后将 $router.push()、 $router.replace() 方法改为了 Promise，假如没有回调函数，错误信息就会交给全局的路由错误处理。如截图：Uncaught (in promise)

方案1： 降版

npm i [email protected] -S

方案2： 禁止全局路由错误处理打印

在引入 vue-router 的文件中增加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.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)
}

const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function repalce(location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
}

方案3： 为每一个增加回调函数

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

this.$router.replace('/location').catch(err => {err});