Soluções para o erro "Navegação redundante evitada para o local atual..."

Ao usar a escrita de navegação programática do vue-router no projeto vue para alternar rotas:

// 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()
        }
      })
    }
  }

Se o usuário clicar no botão várias vezes na página, o console do navegador informará o seguinte erro:

Causa do erro: O método push na instância vue-router retorna um objeto de promessa, portanto, espera-se que o parâmetro de entrada tenha um retorno de chamada de sucesso e falha, se omitido, um erro será relatado.

Solução 1: Traga duas funções de retorno de chamada toda vez que você usar o método push:

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

Solução 2: Reescreva a função push no objeto protótipo Vue-router:

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, ()=>{}, ()=>{}); 
    }
}

Acho que você gosta

Origin blog.csdn.net/FunSober/article/details/127624178
Recomendado
Clasificación