Vue中监听浏览器主动刷新与页面加载的方法

作者:青团子

时间:2026-10-25

浏览:368

本文介绍在Vue项目中如何准确监听浏览器主动刷新行为。通过结合beforeunload和load事件,在mounted生命周期中注册监听器,并在destroyed中移除,确保刷新时能执行特定逻辑。提供经测试有效的代码示例,解决常见监听失效问题。

文章目录

监听浏览器主动刷新

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

实现刷新事件监听的代码写法

网络上许多方案无法正常工作,以下代码经过实际测试有效,可直接置于mounted钩子中执行:

 mounted() {
    window.addEventListener("load", () => {
      //写入你想要执行的代码
    });
  },

以上为个人经验总结,旨在提供参考,欢迎大家支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章