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

最新推荐文章于 2024-12-20 17:17:02 发布

原创最新推荐文章于 2024-12-20 17:17:02 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue router 专栏收录该内容

1 篇文章

订阅专栏

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

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