vue2 监听关闭浏览器弹窗功能不生效？

• Z时代
• 2024-03-06
• 分类：IT

需求是在关闭浏览器的时候，保存页面输入的内容。
我把方法写在了app.vue里，beforeunload的方法每个都试了，都不能让浏览器关闭的时候做出提示，请问我还是哪块没写对吗

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    beforeunload(event) {
      // event.preventDefault()
      // event.returnValue = ''
      return '确定要关闭页面吗？';
      // return false
    }
  },
  mounted() {
    window.addEventListener('beforeunload', this.beforeunload);
  },
};
</script>

回答：

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    beforeunload(event) {
      event.returnValue = '确定要关闭页面吗？';
    }
  },
  mounted() {
    window.addEventListener('beforeunload', this.beforeunload);
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.beforeunload);
  }
};
</script>

回答：

监听onbeforeunload事件

window.addEventListener('onbeforeunload ', this.beforeunload);

回答：

//Vue中写在mounted里
    mounted() {
        window.onbeforeunload= (e)=>{
             e = e || window.event;             
             if (e) {
             e.returnValue = '关闭提示';
             }
             this.toCloseFun()//调用自己的方法
             // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
             return '关闭提示';
            };
    },
//普通js直接写ready里就行了

以上是 vue2 监听关闭浏览器弹窗功能不生效？ 的全部内容， 来源链接： utcz.com/p/934431.html