下面这个问题如何解决
1.为什么会出现这个问题
原因:push是一个promise,promise需要传递成功和失败两个参数,我们的push中没有传递。
goSearch() {
//路由传参
//第一种:字符串形式
// this.$router.push('/search/'+this.keyword+"?k="+this.keyword.toUpperCase())
//第二种:模板字符串
// this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
//第三种:对象
this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
}
2.如何解决?
- 方法一:()=>{},()=>{} 两项分别代表执行成功和失败的回调函数。
this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}},()=>{},()=>{})
this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}},()=>{},()=>{})
这种写法治标不治本,将来在别的组件中push|replace,编程式导航还是会有类似错误
- 方法二: 重写push
push是VueRouter.prototype的一个方法,在router中的index重写该方法即可
//1、先把VueRouter原型对象的push,保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数:告诉原来的push,跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location,resolve,reject){
if(resolve && reject){
originPush.call(this,location,resolve,reject)
}else{
originPush.call(this,location,() => {},() => {})
}
}
this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})