vue如何在用户要关闭当前网页时弹出提示

最新推荐文章于 2025-07-09 10:46:31 发布

原创最新推荐文章于 2025-07-09 10:46:31 发布 · 2.3w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #关闭网页提示

JavaScript 同时被 3 个专栏收录

50 篇文章

订阅专栏

前端开发

43 篇文章

订阅专栏

Vue

31 篇文章

订阅专栏

本文介绍在JavaScript和Vue.js中如何实现页面离开时的提示功能，通过window.onbeforeunload事件，展示了不同环境下（如IE8、Firefox4、Chrome等）的兼容性处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下图

在这里插入图片描述

正常 js 页面处理方式

window.onbeforeunload = function (e) {
  e = e || window.event;
  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }
  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

vue 中处理方式

let _this = this
    window.onbeforeunload = function (e) {
      if (_this.$route.name == "dyyPerformanceCenterSale") {
        e = e || window.event;
        // 兼容IE8和Firefox 4之前的版本
        if (e) {
          e.returnValue = '关闭提示1111';
        }
        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        return '关闭提示222';
      } else {
        window.onbeforeunload = null
      }
    };

针对很多同学说的没有实现，我这里在详细描述一下方法写在 mounted里面，然后记得把route name替换成自己当前页面的，还是不行的请在评论区留联系方式，博主看到会私聊帮你们看一下