Vue中监听页面刷新和关闭beforeunload事件

代码
在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件

  mounted () {window.addEventListener('beforeunload', e => this.beforeunloadFn(e))},destroyed () {window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))},methods: {beforeunloadFn (e) {// 这个事件只有在鼠标真正和浏览器有了交互，再刷新或者关闭时才会触发, 浏览器事件会弹框确认用户是否要离开页面e = e || window.eventif (e) {e.returnValue = '关闭提示'}return '关闭提示'}}

Window: beforeunload event 事件说明 Window: beforeunload event 事件说明
对应代码中的 e.returnValue = '关闭提示' 和 return '关闭提示' 以支持所有浏览器事件

可以参考文章 Vue中监听页面刷新与关闭

Vue中监听页面刷新和关闭beforeunload事件相关推荐

vue项目中监听页面刷新和关闭
在实际开发项目中,有时候我们需要在刷新和关闭时,触发一些功能,那么如何监听到页面的刷新和关闭呢? 1. 在methods中定义事件方法: methods: {beforeunloadFn(e) {co ...
vue 监听页面刷新或关闭
参考:https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转,无法监听到 ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
vue中监听页面，禁止点击浏览器返回按钮返回
问题某个页面限制用户点击浏览器返回按钮返回解决方法在该页面的vue实例中添加mounted destroyed钩子,并且添加goBack方法加以限制 mounted () {if (window ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
vue 中监听并设置scrollTop
vue 中监听并设置scrollTop 问题描述: 目前在做一个项目,父子组件以及兄弟组件中数据调用比较频繁.但是鉴于项目没那么大,就没有使用vuex.直接使用了this.$emit来给父级组件传递参 ...
js监听页面最大化，最小化事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
vue 中监听document.body.scrollTop 值总为0的解决方法
// 基础资料网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; scrollTop 设置或获取位于对象最顶 ...
jquery监听html状态,jquery监听页面刷新
在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接.关闭页面.表单提交时等情况,会提示我们是否确认该操作等信息. 这里就给大家讲讲javascript的onbeforeunload()和o ...

Vue中监听页面刷新和关闭beforeunload事件

Vue中监听页面刷新和关闭beforeunload事件相关推荐

最新文章

热门文章