vue路由切换前弹窗提示,刷新浏览器页面前提示确认框

1,474 阅读1分钟
// 路由跳转确认
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm("当前页面数据未保存,确定要离开?");
    if (answer) {
      next();
    } else {
      next(false);
    }
  },
  // 浏览器刷新确认 把下面 '/test' 换成需要确认操作效果的页面路径,可以通过注释window.onbeforeunload函数后在控制台查看console
  mounted() {
    var _this=this;
    console.log(_this.$route.fullPath)
    window.onbeforeunload = function(e) {
      if (_this.$route.fullPath == '/test') {
        e = e || window.event;
        // 兼容IE8和Firefox 4之前的版本
        if (e) {
          e.returnValue = "关闭提示";
        }
        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        return "关闭提示";
      } else {
        window.onbeforeunload = null;
      }
    };
  }