Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/?k=“

This warning appears

The programmed route jumps to the current route ,（ The parameters are the same ), Click to execute multiple times and throw an exception as shown in the figure above , Declarative navigation does not have this warning ,Vue-router The bottom has been handled

The cause of the problem

'vue-router':"^3.5.3": Abreast of the times vue-router Introduced promise

Solution :

1, By giving push perhaps replace Method passes the response successfully 、 Failed callback function , You can capture the current warning , It can solve , This method treats the symptoms but not the root causes , Change a component ( For other components push Method ) You have to push Add failed and successful callbacks .

 this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}},()=>{},(error)=>{
  // console.log(this.$router)   // Incoming successful or failed callback resolution ( Capture ) This unusual problem 
 })

2. Modify the underlying source code , rewrite $router.push And $router.replace Method （ Permanent cure ）

First of all, understand :    $router yes VueRouter An example of   push yes VueRouter The archetypal approach .

// The first VueRouter Of a prototype object push, Save a copy first

let originPush = VueRouter.prototype.push;

let originReplace = VueRouter.prototype.replace;

//console.log(originPush);

// rewrite push|replace

// The first parameter , Tell the original push Method , Where are you going ( What parameters are passed )

VueRouter.prototype.push = function (location, resolve, reject) {

    //console.log(this);

    if (resolve && reject) {

        //  otiginPush();  //originPush The context is windows

        //call||apply difference : The same thing , Can call the function once , Can tamper with the context of a function once 

        // Difference :call And apply Pass parameters :call Pass parameters separated by commas ,apply Method execution m Pass array 

        originPush.call(this, location, resolve, reject) // Tamper with the context 

    } else {

        originPush.call(this,location, () => { }, () => { });

    }

}

VueRouter.prototype.replace=function(location,resolve,reject){// Where to jump    Successful callback    Failed callback 

       if(resolve && reject){  // If a successful callback is passed , Failed callback 

        originReplace.call(this,location,resolve,reject);

       }else{

        originReplace.call(this,location,()=>{},()=>{});

       }

}

  stay index.js Rewriting in push|replace