编程式路由跳转到当前路由, 控制台抛出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

router/index.js : 

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

//方法一：指定成功回调的onResolve默认值为空函数 / 指定失败回调的 onReject默认值为空函数 
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location, onResolve = () => {
     }, onReject) {
     
  return originalPush.call(this, location, onResolve, onReject)
}

//方法二：catch处理错误
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function (location, onResolve, onReject) {
     
  return originalReplace.call(this, location, onResolve, onReject).catch(err => {
     })
}


new Vue({
     
  render: h => h(App),
  router,
}).$mount('#app')