vue使用beforeRouteLeave实现路由的监听，在跳转前出现确认弹窗

vue实现路由的监听，在跳转前出现确认弹窗

使用 beforeRouteLeave 监听路由是否跳转，若“确认”，将状态设置为可以离开，并且记录要跳转的路由进行跳转；若“取消”，直接关闭弹窗即可

1.html

<!-- 离开提示对话框 -->
<Modal
    v-model='leave.isModalShow'
    title='提示'
    @on-ok='confirmLeave'
    @on-cancel='closeLeaveModal'
>
    <p>是否确认离开？</p>
</Modal>

2.js

data () {
    return {
        leave: {
            isModalShow: false, // 是否显示离开弹窗
            allow: false, // 是否允许离开
            to: '', // 要跳转的路由
        },
    }
},
methods: {
    // 关闭离开弹窗
    closeLeaveModal () {
        this.leave.isModalShow = false
    },
    // 确认离开
    confirmLeave () {
        this.leave.allow = true // 允许离开
        this.$router.push({
            path: this.leave.to,
        })
    },
},
beforeRouteLeave (to, from, next) {
    this.leave.isModalShow = true // 每次离开前，出现确认弹窗
    this.leave.to = to.path // 记录要跳转的路由
    // 判断是否可以离开
    if (this.leave.allow) {
        next(true)
    } else {
        next(false)
    }
},