编程式路由跳转到当前路由, 控制台抛出NavigationDuplicated的错误

router.push 的语法规则如下：

router.push(location（导航路径）, onComplete（成功的回调）?, onAbort?（失败的回调）)
router.push(location).then(onComplete).catch(onAbort)
router.replace 的语法规则如下：

router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
解决方案一：

methods: {
//执行 toSearch() 方法后，跳转路由
toSearch(){
this.$router.push('/search') //————重复点击会报错：NavigationDuplicated
//解决方法如下：
this.$router.push('/search' , ()=>{})
//或者
this.$router.push('/search' , undefined , ()=>{})
//或者
this.$router.push('/search') .catch(()=>{})
}
}

解决方案二：
每次调用push 或者 replace 方法都要写回调函数，很麻烦，因此可以在Vue原型上重构这两个方法，重构时给两个回调函数其中一个指定默认值或者指定catch

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


//终极解决多次触发push或者repalce，报错的问题
//NavigationDuplicated

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

//location为传过来的对象
VueRouter.prototype.push = function(location,onResolved,onRejected){
  if(onResolved === undefined && onRejected === undefined){
    // originPush.call目的是让VueRouter实例化对象去调用‘
    //如果不加，那就是window在调用
    return originPush.call(this,location).catch(() => {})
  }else{
    return originPush.call(this,location,onResolved,onRejected)
  }
}

VueRouter.prototype.replace = function(location,onResolved,onRejected){
  if(onResolved === undefined && onRejected === undefined){
    // originPush.call目的是让VueRouter实例化对象去调用‘
    //如果不加，那就是window在调用
    return originReplace.call(this,location).catch(() => {})
  }else{
    return originReplace.call(this,location,onResolved,onRejected)
  }
}


import routes from '@/router/routes'

export default new VueRouter({
  routes
})

原文链接：https://blog.csdn.net/qq_38763173/article/details/105349152