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

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

1
2
3
4
5
6
7
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直接传个空的函数进去:

1
2
3
4
5
6
7
8
9
10
//修复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)
}
}

至此,问题解决!

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

https://www.linesoft.top/archives/28/

作者

linesoft

发布于

2021-02-28

更新于

2022-04-18

许可协议

评论