首页 前端知识 解决Vue报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current locatio

解决Vue报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current locatio

2024-02-26 20:02:36 前端知识 前端哥 945 684 我要收藏

无废话篇,直接上解决办法

原因:这是因为你多次触发路由跳转事件,且跳转的url地址都是同一个。

解决方法:重写push / replace方法

在入口文件(main.js)中添加
import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(location) {
   return originalReplace.call(this, location).catch(err => err)
}

new Vue({
  render: h => h(App)....

上面的代码还有第二种写法,实现原理都一样

import VueRouter from 'vue-router'

let originPush =VueRouter.prototype.push;
let originReplace =VueRouter.prototype.replace;
VueRouter.prototype.push=function(location,resolve,reject){
  if(resolve&&reject){
    originPush.call(this,location,resolve,reject)    
  }else{
    originPush.call(this,location,()=>{},()=>{})
  }
}
VueRouter.prototype.replace=function(location,resolve,reject){
  if(resolve&&reject){
    originReplace.call(this,location,resolve,reject)
  }else{
    originReplace.call(this,location,()=>{},()=>{})
  }
}

new Vue({
  render: h => h(App)....
 第二种方式:在push方法后面加上两个参数resolve和reject
this.$router.push('/search/'+this.keyWord)

替换成

this.$router.push('/search/'+this.keyWord,()=>{},()=>{})

废话部分:(解释一下原理)

这个问题是在vue-router在3的版本之后就有的,原因是因为编程式路由在使用push或者replace方法进行路由跳转,底层是使用了ES6中的Promise,每次push或者replace之后就会返回一个promise对象,能够执行回调处理导航成功或者失败的情况。

为什么会报NavigationDuplicated错误?这其实是Vue Router 提供了一种机制来避免重复导航,从而提高应用程序的性能和稳定性。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2748.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!