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引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调，否则就会报出以上的错误。

原代码

解决办法

第一种

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

         switchTab(path) {if (this.$router.path == path) returnthis.$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行

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

vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
问题在做前后端分离项目的时候,vue使用路由进行界面跳转时,出现了以下错误,说是路由重复啥的,之前的项目都没这问题.. vue-router.esm.js?8c4f:2065 Uncaught (i ...
vue-router.esm.js?8c4f:1958 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
原链接: https://blog.csdn.net/qq_44242030/article/details/108823697?ops_request_misc=%257B%2522request% ...
报错 | vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navig
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...
【vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigati】
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...
vue-router.esm.js?fe87:2062 Uncaught (in promise) Error: Avoided redundant navigation to current loc
vue报错 vue-router.esm.js?fe87:2062 Uncaught (in promise) Error: Avoided redundant navigation to curre ...
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navig错误解析
出现的情况写vue时,当使用编程式导航多次点击跳转时会出现原因因为编程式this.$router.push或者this.$router.replace的返回值是一个Promise对象,所以需要处 ...
vue报错vue-router.esm.js?8c4f:2062 Uncaught (in promise) Error: Avoided redundant navigation to curren
在写导航切换时点击会有以下报错这个报错是是路由中点击路径重复 ,也有可能是安装的vue-router还是之前出错的那个版本,在项目目录下运行 npm i vue-router@3.0 -S 即可. ...
Vue-Router点击相同路由报错，vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided r
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...
vue报错Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...

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相关推荐

最新文章

热门文章