Vue 页面切换时弹出确认框

需求

Vue页面退出或切换前弹出确认框，提示是否离开。

实现

页面使用iView框架，添加beforeRouteLeave即可。

export default {
    name: "page",
    data() {
        return {}
    },
    methods: {},
    beforeRouteLeave (to, from, next) {
        this.$Modal.confirm({
          content:'内容还未保存，是否离开？',
          title:'提示',
          okText: '离开',
          cancelText: '取消',
          onOk: function () {
            // 正常跳转
            next()
          },
          onCancel: function () {
            // 如果取消跳转地址栏会变化，这时保持地址栏不变
            window.history.go(1)
          }
        });
    }
}