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