Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search". Vue添加注册事件双击报错，编程式导航，NavigationDuplicated错误

对于编程式导航 来说，重复单击会抛出NavigationDuplicated的警告错误.

编程式导航点击时可以正常跳转，双击就会报错

当前使用vue-router版本：

 

 

 报错原因：

编程式导航内部使用promise语法，需要路由跳转时有指定的回调函数，否则就会返回一个promise.

同时，内部会判断跳转的路径是否发生变化。

有变化     返回的promise实例状态：    成功

无变化     返回的promise实例状态：   失败，

 

解决：

方法1：跳转时指定成功和失败的回调函数

方法2：使用catch来处理错误

总结：只能解决部分的，不能解决所有编程式导航报错，推荐在原型上修改

方法3：在路由配置的index.js中：修改原型上的push\replace方法,解决重复跳转时报错 1 //在原型上修改push\replace方法,解决重复跳转时报错 2 // 1.1先将原型之前的push\replace存储到一个变量中

const originPush = VueRouter.prototype.push
const originReplace = VueRouter.prototype.replace

// 1.2 修改原型上的push
VueRouter.prototype.push = function (location, okCallback, errCallback) {
  // 如果没有传递这两个参数
  if (okCallback === undefined && errCallback === undefined) {
    // 统一处理报错问题
    originPush.call(this, location).catch(() => {})
  } else {
    originPush.call(this, location, okCallback, errCallback)
  }
}
// 1.3 修改原型上的replace
VueRouter.prototype.replace = function (location, okCallback, errCallback) {

  if (okCallback === undefined && errCallback === undefined) {
    // 统一处理报错问题
    originReplace.call(this, location).catch(() => {})
  } else {
    originReplace.call(this, location, okCallback, errCallback)
  }
}

编程式导航按钮注册事件：

methods:{
    // 实现搜索按钮单击跳转 编程式导航 push在历史记录中添加一条可以回退
    betSearch(){
        this.$router.push('/search')
    }
}