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

第一想法肯定是在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()的地址

发表评论
李志远
回复 @李志远: 东方闪电
李志远
阿士大夫撒旦
李志远
撒地方撒的
huangyin
不错哦