解决vue在控制台的 NavigationDuplicated 报错
解决vue在控制台的 NavigationDuplicated 报错复现vue router 升级到3.1.x 后,重复点击导航时(连续点击相同路由链接)控制台出现报错 {_name: "NavigationDuplicated", name: "NavigationDuplicated"},虽然不影响功能使用,但也不能视而不见。原因vue router ≥ v3.1后 ,回调形...
·
解决vue在控制台的 NavigationDuplicated 报错
复现
vue router 升级到3.1.x 后,重复点击导航时(连续点击相同路由链接)控制台出现报错 {_name: "NavigationDuplicated", name: "NavigationDuplicated"},虽然不影响功能使用,但也不能视而不见。
原因
vue router ≥ v3.1 后 ,回调形式改成promise api了,返回的是promise,如果没有捕获到错误,控制台始终会出现如图的警告。
解决方法一
// 在引用vue-router的页面添加一段代码
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
解决方法二(推荐)
// 补齐 router.push() 的第三个参数
this.$router.push(route, () => {}, (e) => {
console.log('输出报错',e)
})
解决方法三(推荐)
// 捕获 router.push 异常
this.$router.push(route).catch(err => {
console.log('输出报错',err)
})
后记,
解决办法有很多种,大家可自由选择。解决办法一看似一劳永逸,但是不利于业务理解。也有人提出降级解决,本人更推荐 【解决办法二 或 解决办法三】。
更多推荐
已为社区贡献1条内容
所有评论(0)