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