vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

报错信息

vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".

vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

报错原因：重复点击路由导致，因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调，否则就会报出以上的错误。

原代码

vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

解决办法

第一种

在进行路由跳转时对路径进行判断如果重复即不再执行

			switchTab(path) {
				if (this.$router.path == path) return
				this.$router.push(path)
			}

第二种

跳转后使用catch语句对错误不再进行处理

this.$router.push(path).catch(err => {})

第三种

基于第二种方法，当我们的路由跳转过多时就需要每次跳转都要加上catch回调，这样比较麻烦，所以还可以在引入vueRouter文件下重写push和replace方法


import VueRouter from 'vue-router';
//保存原型对象的Push
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace
//重写push方法
VueRouter.prototype.push = function (location, res, rej) {
  if (res && rej) {
    originPush.call(this, location, res, rej)
  }
  else {
    originPush.call(this, location, () => { }, () => { })
  }
 
}
//重写replace方法
VueRouter.prototype.replace = function (location, res, rej) {
  if (res && rej) {
    originReplace.call(this, location, res, rej)
  }
  else {
    originReplace.call(this, location, () => { }, () => { })
  }
}

csdn文章推荐受影响解决办法10个字10行文章来源地址https://www.toymoban.com/news/detail-403836.html

csdn文章推荐受影响解决办法10个字10行

到了这里，关于vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！