Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案

萱萱的七彩鱼

于 2020-12-15 09:48:47 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏： vue router 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/Hello__World123/article/details/111191626

vue router 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何解决Vue-Router升级后出现的`Uncaught(inpromise)Error`问题，通过重写Router原型链上的push和replace方法，确保在调用时能正确处理错误。通过在方法内部添加catch块，捕获并处理可能出现的错误，避免了未定义的onResolve或onReject回调导致的异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案
对Router原型链上的push、replace方法进行重写，这样就不用每次调用方法都要加上catch。

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

replace方法同上

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}