vue router连续点击多次路由报错解决方法

create by db on 2020-9-30 17:13:30
Recently revised in 2020-9-30 17:45:49

闲时要有吃紧的心思，忙时要有悠闲的趣味

目录

• 前言

• 正文

• 总结

• 参考文档

前言

返回目录

 vue-router 升级到 3.1.x 后，重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能视而不见

正文

返回目录

报错信息

报错原因

 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)
  }
)

总结

返回目录

 双节将至，祝大家中秋**&&**国庆愉快！

参考文献

• Element/vue router连续点击多次路由报错解决方法 | CSDN-ldz_miantiao

• 解决Vue中重复点击相同路由控制台报错问题 | CSDN-@Demi

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。