Vue2 使用 beforeunload 事件阻止浏览器刷新页面

属性设置为空字符串，这样浏览器会弹出确认框。如果用户点击确认离开页面，则浏览器会刷新页面，否则页面不会刷新。函数,如果页面有内容，则阻止默认行为，并将。

小小小的学习日记

3706人浏览 · 2023-05-05 15:43:37

小小小的学习日记 · 2023-05-05 15:43:37 发布

在组件的created()生命周期中注册beforeunload事件处理函数

created() {
  window.addEventListener('beforeunload', this.handleBeforeunload);
},

在组件的beforeDestroy()生命周期中移除beforeunload事件处理函数：

beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeunload);
},

实现handleBeforeunload函数,如果页面有内容，则阻止默认行为，并将returnValue属性设置为空字符串，这样浏览器会弹出确认框。如果用户点击确认离开页面，则浏览器会刷新页面，否则页面不会刷新。
```
methods: {
  handleBeforeunload(event) {
    if (this.hasContent) { // hasContent为页面是否有内容的标志
      event.preventDefault();
      event.returnValue = '';
    }
  },
},
```

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^