编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?
注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。这种异常,对于程序没有任何影响的。
为什么会出现这种现象:
由于vue-router引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,
第一种解决方案:是给push函数,传入相应的成功的回调与失败的回调
//路由跳转时,指定跳转成功的或跳转失败的回调函数
this.$router.push(`/search/${this.keyword}`,()=>{},()=>{})
第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从根本解决
/* 重写push,replace */
let orginPush =VueRouter.prototype.push;
let orginRepalce = VueRouter.prototype.replace;
VueRouter.prototype.push = function(location,resolve,reject){
//如果外界传入了resolve和rejected回调,那么就用外部传入的
if(resolve&&reject){
//这里的this指的是组件实例上的vueRouter(this.$router)
orginPush.call(this,location,resolve,reject)
}else{
//否则就传入一个空函数作为回调,这样就可以避免没有传入回调时的报错。
orginPush.call(this,location,()=>{},()=>{})
}
}
VueRouter.prototype.replace = function(location,resolve,reject){
if(resolve&&reject){
orginRepalce.call(this,location,resolve,reject)
}else{
orginRepalce.call(this,location,()=>{},()=>{})
}
}
至于为什么用call()函数方法,而不是直接在原型上改,是因为原型是直接指向window的,我们是想组件实例上改,因此用call()方法来用组件实例上的vueRouter调用window上vueRouter原型上的push或者replace方法来进行修改
网友评论