The programmed navigation route jumps to the current route (the parameters remain unchanged), and if it is executed multiple times, it will throw a navigationduplicated warning error?

>> rewrite push and replace Method  

1. Program navigation route to jump to the current route ( The parameters are the same ),  Multiple executions will throw NavigationDuplicated Warning error ?
    -- There are two forms of route jump ： Declarative navigation 、 Programming navigation 
    -- Declarative navigation has no such problems , because vue-router The bottom has been handled .
    1.1  Why is it that when programmed navigation performs route jump , There are such warning errors ？
    "vue-router":"^3.5.3": Abreast of the times vue-router introduce promise
    1.2  By giving push Method passes the corresponding success 、 Failed callback function , You can catch the current error , Can solve .
    1.3  Through the code at the bottom , It can solve the error 
    this.$router.push({
        name:'search',
        params:{
            keyword:this.keyword
        },
        query:{
            k:this.keyword.toUpperCase()
        }
        },()=>{

        },(error)=>{
            console.log(error)
      })
     This kind of writing ： Treat the symptoms, not the root cause , In the future, among other components push|replace, There are similar errors in programming navigation 
    1.4
        
 return promise. Why did the above warning appear ？ because promise You need to pass a successful or failed callback , In this way, these exceptions can be handled .
    this: The current component instance （search）
    this.$router attribute ： The current property , The property value is VueRouter An instance of a class , When registering a route in the entry file , Add... To the component instance $router|$route attribute 
    this keyword , That is, the so-called execution context 
    push:VueRouter An instance of a class 

    function VueRouter(){
    
    }
    VueRouter.prototype.push = function(){
        // The context of the function is VueRouter An instance of a class 
    }
    // How to prototype objects 
    let $router = new VueRouter()
    $router.push(xxx)
    this.$router.push();

（1） The first VueRouter Of a prototype object push, Save a copy first 
（2） rewrite router.prototype Upper push Method 
（3） If the external input resolve and rejected Callback , Then use the external input ; Otherwise, an empty function is passed in as the return      transfer , In this way, you can avoid the error when there is no incoming callback .
（4） Use call Why ： because originPush It has been extracted as a global function , if push When called , Don't explicitly specify this, be this Will point to window, instead of VueComponent example .

// The first VueRouter Of a prototype object push, Save a copy first 
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace

// rewrite push|replace
// The first parameter ： Tell the original push Method , Where do you jump （ What parameters are passed ）
// The second parameter ： Successful callback 
// The third parameter ： Failed callback 

//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 , Pass array 
VueRouter.prototype.push = function (location,resolve,reject){
    if(resolve && reject){
        originPush.call(this,location,resolve,reject)
    }else {
        originPush.call(this,location,()=>{},()=>{})
    }
}

VueRouter.prototype.replace = function (location,resolve,reject){
    if(resolve && reject){
        originReplace.call(this,location,resolve,reject)
    }else{
        originReplace.call(this,location,()=>{},()=>{})
    }
}

>>call and 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 , Pass array