vue离开页面弹窗提示

vue离开提示弹窗分类

一：关闭页签、网页或刷新

mounted() {
  window.addEventListener("beforeunload", this.beforeUnloadHandler, false)
},
destroyed() {
  window.removeEventListener("beforeunload", this.beforeUnloadHandler, false)
},
methods: {
	beforeUnloadHandler(e) {
	  e.returnValue = "离开此页面？" // 此处返回任意字符串，不返回null即可，不能修改默认提示内容
	},
}

二：vue页面返回上一层路由

不断点击浏览器返回键或通过按钮触发this.$router.go(-1)再点击取消按键，beforeRouteLeave不执行next()时，url会变为上一层的url，页面不会切换到上一层，停留在当前页面

不做处理，浏览器地址栏的url会不断返回上一层，此时再点离开按键则返回的可能不是上页的url

所以，需要记录当前页面url并在取消的时候推回路由栈中

data() {
 return {
    currentUrl: ""
  }
},
mounted(){
	// 记录当前页面url
	this.currentUrl = window.location.href
}
beforeRouteLeave(to, from, next) {
  this.$confirm("系统可能不会保存您所做的更改。", "离开此页面？", {
    confirmButtonText: "离开",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      // confirmButton回调
      next()
    })
    .catch(() => {
      // cancelButton回调，把当前页路由推回
      // 不能使用this.$router进行路由操作，会触发beforeRouteLeave导致死循环
      window.history.pushState("", "", this.currentUrl)
    })
},
back() {
  // 页面中按键触发
  this.$router.go(-1)
}

什么，你说你狂点浏览器的返回键会粗问题？噢，那太骚了，我顶不住了。