vue项目中监听页面刷新和关闭

在实际开发项目中，有时候我们需要在刷新和关闭时，触发一些功能，那么如何监听到页面的刷新和关闭呢？

1. 在methods中定义事件方法：

methods: {beforeunloadFn(e) {console.log('刷新或关闭')// ...}
}

2. 在created 或者 mounted 生命周期钩子中绑定事件

created() {window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}

3. 在 destroyed 钩子卸载事件

destroyed() {window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}

测试了页面刷新和关闭都能监听到。

项目实测

回到我自己的项目，可以使用 onbeforeunload 事件和 beforeDestroy 钩子函数结合：

created() {window.addEventListener('beforeunload', this.beforeunloadFn())
},
destroyed() {window.removeEventListener('beforeunload', this.beforeunloadFn())
},
methods: {gotoPage(path){this.$router.push(path);this.$store.state.iframeSrc = this.$route.meta.link;this.$store.state.iframeTitle = this.$route.meta.title;},beforeunloadFn() {console.log('刷新或关闭');if(this.$route.path == '/system/knowledgeGraph') {this.gotoPage(this.graphItems.path);}}
}

vue项目中监听页面刷新和关闭相关推荐

Vue中监听页面刷新和关闭beforeunload事件
代码在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件 mounted () {window.addEventListener('befo ...
vue 监听页面刷新或关闭
参考:https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转,无法监听到 ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中跳转页面，页面从顶部开始
vue项目中采用路由机制,当页面进行跳转,滚轮的位置不会改变 mounted() {//设置滚动条指定document.documentElement.scrollTop=0},

vue项目中监听页面刷新和关闭

1. 在methods中定义事件方法：

2. 在created 或者 mounted 生命周期钩子中绑定事件

3. 在 destroyed 钩子卸载事件

项目实测

vue项目中监听页面刷新和关闭相关推荐

最新文章

热门文章