如果在 beforeRouteLeave 钩子中跳转到指定链接?

https://www.mmxiaowu.com/article/5b84fa5c2f52003e4d38c657

 

有这么一个需求, 需要在用户离开时, 弹窗让用户选择[是]/[否]按钮来决定页面跳转, 如果选[是]则跳转到一个页面, 选否则留在当前页面

第一想法肯定是在beforeRouteLeave做相关逻辑

beforeRouteLeave(to, from, next) { const answer = window.confirm('...') if (answer) { next('/some/path') } else { next(false) } }

结果出现了死循环, 因为在调用next('/some/path')时, 又触发了beforeRouteLeave, 从而又执行了next('/some/path'), 所以出现了死循环

处理方法也很简单:

beforeRouteLeave(to, from, next) { if (to.fullPath === '/some/path') { return next() } const answer = window.confirm('...') if (answer) { next('/some/path') } else { next(false) } }

在离开路由时, 判断目的地址, 如果目的地址符合的情况, 直接跳转, 不再弹窗询问

但是也会出现一个问题, 就在当前页面直接点目的地址时(如果有), 就会不出现弹窗, 而直接跳转到目标地址, 当然也可以加些query来区别直接点击和next()的地址