【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)
}
}
总结
以上就是今天要讲的内容，希望对大家有所帮助！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/82887.html
