vue-router 3.5.3 编程式导航出现的错误Uncaught (in promise) NavigationDuplicated

背景：搜索按钮采用编程式导航，当用户点击搜索时即跳转到搜索页面。

在搜索框中输入内容，点击搜索正常，当再次点击时出现错误提示。

这是因为  vue-router 3.5.3 引入了 promise，而我们在 push 或 replace 的时候没有给 promise 传递成功与失败的回调。

funciton push () {
    return new Promise((resolve,reject)=> {
        
    })
}

我们先在路由这里打印一下返回的结果。

methods:{
        // 搜索
        goSearch(){
            // 路由传递参数
            let a = this.$router.push({name:"Search",params:{keywords:this.keywords},query:{username:this.keywords.toUpperCase()}})
            console.log(a)
    
        }
    }

点击搜索可以看到打印了两次 promise

解决方法： 通过给 push 方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决。

methods:{
        // 搜索
        goSearch(){
            // 路由传递参数
            this.$router.push({name:"Search",params:{keywords:this.keywords},query:{username:this.keywords.toUpperCase()}},(resolve)=>{console.log('成功了',resolve)},(erro)=>{console.log('失败了',erro)})
    
        }
    }

 取消打印即可。

第二种方法：重写 VueRouter.push 方法

我们需要明白

this:当前组件实例（search）
this.$router属性：当前的这个属性，属性值vueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$route属性
push:VueRouter类的一个实例

我们先打印一下 this.$router

methods:{
        // 搜索
        goSearch(){
            // 路由传递参数
            this.$router.push({name:"Search",params:{keywords:this.keywords},query:{username:this.keywords.toUpperCase()}},(resolve)=>{},(erro)=>{})
            console.log(this.$router)
    
        }
    }

可以看到 push 的方法是在VueRouter的原型上。 

 举个例子方便理解

function VueRouter(){

    }
// 原型对象的方法
VueRouter.prototype.push = function(){

    }
let $router = new VueRouter()

$router.push(xxxx)

this.$router.push()

 这下我们在router文件夹的index.js重写一下 push 方法

// 先把 VueRouter 原型对象的 push 保存一份
let originpush = VueRouter.prototype.push
// 重写 push 与 replace 
// 第一个参数：告诉原来的 push 方法，你往哪里跳转（传递哪些参数）
// 第二个参数：成功的回调
// 第三个参数：失败的回调
VueRouter.prototype.push = function(location,resolve,reject){
  if(resolve && reject){
    originpush.call(this,location,resolve,reject)  // 如果传递了 resolve && reject 调用原来的 push 方法
  }else{
    originpush.call(this,location,()=>{},()=>{})
  }
}
// replace重写
let originreplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function(location,resolve,reject){
  if(resolve && reject){
    originreplace.call(this,location,resolve,reject)
  }else{
    originreplace.call(this,location,()=>{},()=>{})
  }
}

问题解决。

拓展 call（） 和 apply（） 的区别

相同点，都可以调用函数一次，都可以篡改函数的上下文一次
不同点：call 与 apply 传递参数：call 传递参数用逗号隔开，apply 方法执行，传递数组