四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）

vue-router 升级到3.1.x 后，重复点击导航时，控制台出现报错，虽然不影响功能使用，但是看的就不舒服。

报错信息

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

报错原因

vue router ≥ v3.1 后，回调形式改成promise api了，返回的是promise，如果没有捕获到错误，控制台始终会出现如上图的警告。

解决方法

【方法一】降低版本

npm i vue-router@3.0 -S

【方法二】在router文件夹下增加下列代码

//尝试了下不管用
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {return routerPush.call(this, location).catch(error=> error)
}

【方法三】捕获异常

// 捕获router.push异常
this.$router.push(route).catch(err => {console.log('输出报错',err)
})

【方法四】补齐router第三个参数

// 补齐router.push()的第三个参数
this.$router.push(route, () => {}, (e) => {console.log('输出报错',e)
})

四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）相关推荐

解决Vue中重复点击相同路由控制台报错问题
vue-router 升级到3.1.x 后,重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能视而不见. 报错信息报错原因 vue router ≥ v3.1 后 ,回调形式改成prom ...
报错：Avoided redundant navigation to current location: “/login“.完美解决
需求: 登陆之后才能查看主页面,否则跳转至登录页遇到的问题: 一开始是打算直接在拦截器跳转路由的,发现会报错Avoided redundant navigation to current locat ...
vue-router 报错Error: Avoided redundant navigation to current location: “/index/user“解决方式
问题使用ivew Menu 制作的导航菜单,连续点击同一个导航时报错该报错不影响功能当前地址 http://localhost:8080/#/transfer/index 连续点击–信息录入报 ...
Vue报错Error: Avoided redundant navigation to current locatiton 重复点菜单报错问题
解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 //路由页面添加以下代码: const originalPush = Router.prototype.push ...
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能坐视不管. 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplica ...
前端开发：Vue项目报错NavigationDuplicated：Avoided redundant navigation to current location：“/XXX”的解决方法
最近在Vue项目开发的过程中遇到一个问题,那就是在点击同一个路由操作的时候,控制台会报一下错误提示: Uncaught (in promise) NavigationDuplicated: Avoid ...
解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location问题
在Vue路由中遇到Error: Avoided redundant navigation to current location:xxxx:错误,意思是路由重复在router文件夹下的index.j ...
解决报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “
报错内容: vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navi ...
vue报错 Avoided redundant navigation to current location: “/search“
报错信息: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: ...

四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）

报错信息

报错原因

解决方法

四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）相关推荐

最新文章

热门文章