VUE阻止浏览器返回或移动端物理返回按钮返回页面

些项目的时候经常会碰到需要阻止用户返回页面的需求，例如：长表单录入，为了更好的用户体验，通常会在用户返回页面是提示用户是否确定需要返回，防止用户误操作导致数据丢失的问题！

实现方法：

这里可以使用 vue-router 的路由守卫 beforeRouteLeave （官方文档：导航守卫 | Vue Router） 来监听页面的返回操作，通过 next （false）回调函数来阻止页面的返回

这里用setTimeout 的原因是我用了elementUI的弹窗提示，解决浏览器前后退MessageBox闪烁的问题！

  beforeRouteLeave(to, form, next) {
    setTimeout(() => {
      this.$confirm('当前添加或修改的数据未提交，返回将会丢失，是否确定返回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        next()
      }).catch(() => {
        next(false)
      })
    }, 200)
  },