Solutions for the error "Avoided redundant navigation to current location..."

When using vue-router's programmatic navigation writing in the vue project to switch routes:

// Search/index.vue
<button @click="goSearch" v-model="keyword">搜索</button>  //按钮绑定事件,切换路由

methods: {
    goSearch() {
      this.$router.push({     //编程式导航
        name: 'search',
        params: {
          keyword: this.keyword,
        },
        query: {
          k: this.keyword.toUpperCase()
        }
      })
    }
  }

If the user clicks the button multiple times on the page, the browser console will report the following error:

Cause of error: The push method on the vue-router instance returns a promise object, so the incoming parameter is expected to have a success and failure callback, if omitted, an error will be reported.

Solution 1: Bring two callback functions every time you use the push method:

this.$router.push(`/search/${this.keyword}}`, ()=>{}, ()=>{})  
//第二、第三个参数分别为成功和失败的回调函数
      

Solution 2: Rewrite the push function on the Vue-router prototype object:

let originPush =  VueRouter.prototype.push;  //备份原push方法

VueRouter.prototype.push = function (location, resolve, reject){
    if (resolve && reject) {    //如果传了回调函数,直接使用
        originPush.call(this, location, resolve, reject);
    }else {                     //如果没有传回调函数,手动添加
        originPush.call(this, location, ()=>{}, ()=>{}); 
    }
}

Guess you like

Origin blog.csdn.net/FunSober/article/details/127624178