需求

  • 当页面中有数据变化时,切换到其他路由时要弹窗提醒

与刷新区别

刷新是在当前页面进行,用到的是原生JS的onbeforeunload函数,在手动刷新F5,或者点击关闭页面时候都会触发

  • 路由切换在切换url,进入到另一个页面,这里用到的是vue-router的beforeRouteLeave钩子,直接看代码
beforeRouteLeave(to, from, next) {
if (!this.disabled) { //同样是根据那按钮判断,按钮是非禁用状态,则弹窗,这里的ComfirmMsg我也封装了。
      ComfirmMsg('当前页面数据未保存,确定离开?')
        .then(() => next())
        .catch(() => {
          Msg('已取消删除', 'info')
          next(false)
        })
    } else {
      next()//按钮是禁用状态,则next(),不弹窗
    }
  }

爬。