Vue中$router.push的Redirected when going from xxx to xxx via a navigation guard.问题解决过程
今天在做Vue项目时,我需要让Router路由到某个path后自动跳转到另一个path,于是就写了个守卫来实现:
1 | router.beforeEach((to, from, next) => { |
但是跳转的时候却遇到了这么个报错:
意思是在我跳转的时候,通过导航守卫发生了重定向。
不过。。这就奇怪了,我确实在跳转的时候通过导航守卫重定向了,但是为什么要报错??难道这么写不行吗。
于是Google了一下,找到了出现这个报错的原因:(来源:https://stackoverflow.com/a/65326844)
简单地说就是这个报错就是这么设计的,这个报错可以让开发者知道$router.push并没有完成预期的跳转任务,而是被重定向到了另一个地址。
这么设计也确实有它的道理,不过。。我确实想要跳转,而怎么让它不报错呢?
因为跳转这块用了Element-UI的Navbar,于是我翻了下相关的代码:
发现Element-UI用了$router.push方法,并在出错的时候直接将错误输出到了控制台上,这才导致看到了那个错误。
不过。。这怎么办,因为Element-UI是个node模块,又不好直接改源码,于是最后只能直接重写了push方法,替换Element-UI的OnError直接传个空的函数进去:
1 | //修复Element-UI NavMenu中的$router.push导致的Redirected when going from "/" to "/norm" via a navigation guard.问题 |
至此,问题解决!
Vue中$router.push的Redirected when going from xxx to xxx via a navigation guard.问题解决过程