Vue中$router.push的Redirected when going from xxx to xxx via a navigation guard.问题解决过程

今天在做Vue项目时,我需要让Router路由到某个path后自动跳转到另一个path,于是就写了个守卫来实现:

router.beforeEach((to, from, next) => {
  if (to.path == "/norm") {
    next("/norm/principle")
  } else {
    next()
  }
})

但是跳转的时候却遇到了这么个报错:

意思是在我跳转的时候,通过导航守卫发生了重定向。
不过。。这就奇怪了,我确实在跳转的时候通过导航守卫重定向了,但是为什么要报错??难道这么写不行吗。
于是Google了一下,找到了出现这个报错的原因:(来源:https://stackoverflow.com/a/65326844

简单地说就是这个报错就是这么设计的,这个报错可以让开发者知道$router.push并没有完成预期的跳转任务,而是被重定向到了另一个地址。
这么设计也确实有它的道理,不过。。我确实想要跳转,而怎么让它不报错呢?
因为跳转这块用了Element-UI的Navbar,于是我翻了下相关的代码:

发现Element-UI用了$router.push方法,并在出错的时候直接将错误输出到了控制台上,这才导致看到了那个错误。
不过。。这怎么办,因为Element-UI是个node模块,又不好直接改源码,于是最后只能直接重写了push方法,替换Element-UI的OnError直接传个空的函数进去:

//修复Element-UI NavMenu中的$router.push导致的Redirected when going from "/" to "/norm" via a navigation guard.问题
//修改自:https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) {
    return originalPush.call(this, location, onResolve, function () { })
  } else {
    return originalPush.call(this, location).catch(err => err)
  }
}

至此,问题解决!

添加新评论

评论

4 条

所念皆星河

大佬牛逼

回复 ·

打卡

回复 ·

2131

大dDAS

回复 ·

Linux_Miga

在微机室学习的时候遇到过,但是本着“遇到困难睡大觉”的真理,还是没研究。。。。现在恍然大悟啊。。。

回复 ·