vue监听浏览器主动刷新

最新推荐文章于 2025-04-02 17:07:09 发布

诺小D

最新推荐文章于 2025-04-02 17:07:09 发布

阅读量6.8k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46352558/article/details/123407724

版权

该博客主要介绍了如何在Vue应用中监听浏览器的刷新事件，通过`mounted()`和`destroyed()`生命周期钩子来添加和移除`beforeunload`事件监听器。在`beforeunload`事件触发时，执行`beforeunloadHandler`方法，实现特定的操作，如数据保存或确认提示。此技术有助于在用户离开页面前进行必要的处理。

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

 mounted() {
             window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))   //监听页面刷新触发事件
        },
 methods(){
  		beforeunloadHandler(e) {    //根据事件进行操作进行操作
                console.log(e)
                console.log('浏览器刷新') 
            },
},
destroyed () {  //进行监听销毁
            window.removeEventListener('beforeunload', e =>this.beforeunloadHandler(e))
},