【Vue】针对路由跳转中编程式导航push和replace进行重写

【Vue】针对路由跳转中编程式导航push和replace进行重写

---

文章目录 【Vue】针对路由跳转中编程式导航push和replace进行重写总结

---

  在写Vue项目的时候，进行路由跳转，对于编程式导航会出现多次执行的时候抛出NavigationDuplication错误

解决的办法：

方法一（治标不治本）：

/* 
	因为$router返回的是promise对象,该报错就是因为这个原因,promise需要接收成功和失败的回调所以我们在跳转的后面补两个参数
*/
this.$router.push({
  	name:'search',
  	params:{keyword:this.keyword},
  	query:{k:this.keyword.toUpperCase()}
},()=>{},()=>{})

方法二：重写
在配置路由组件的文件中进行重写

// 重写路由组件
// 用来保存原来的push和replace方法
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace

// 重写push
// 在这里需要注意上下文的指向
/* 
    call和apply
    相同点:都可以调用函数一次,都可以篡改函数的上下文一次
    不同点:传递参数的时候,call是用逗号隔开,apply是传递数组
*/
VueRouter.prototype.push = function(argument,resolve=()=>{},reject=()=>{}){
    if(resolve && reject)
    {
        originPush.call(this,argument,resolve,reject)
    }
}

VueRouter.prototype.replace = function(argument,resolve=()=>{},reject=()=>{}){
    if(resolve && reject)
    {
        originReplace.call(this,argument,resolve,reject)
    }
}

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！