vue監(jiān)聽(tīng)瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件代碼示例
更新時(shí)間：2023年08月11日 11:00:58 作者：衫褲泡露
在前端開(kāi)發(fā)中我們通常會(huì)遇到這樣的需求,用戶(hù)離開(kāi)、刷新頁(yè)面前,修改數(shù)據(jù)未進(jìn)行保存操作,需要提示框提醒用戶(hù),這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽(tīng)瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件的相關(guān)資料,需要的朋友可以參考下
1、監(jiān)聽(tīng)瀏覽器頁(yè)面關(guān)閉/刷新事件
運(yùn)用場(chǎng)景：瀏覽器頁(yè)面關(guān)閉后刪除local storage、session、cookie、發(fā)送請(qǐng)求等。
//綁定監(jiān)聽(tīng)事件
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
}
methods: {
beforeunloadHandler(e) {
console.log('關(guān)閉后=>為所欲為')
}
},
//頁(yè)面銷(xiāo)毀前解除監(jiān)聽(tīng)
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
}2、只監(jiān)聽(tīng)瀏覽器關(guān)閉事件
data(){
return{
beforeUnload: '',
Handler: ''
}
}
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.addEventListener('unload', e => this.unloadHandler(e))
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e))
},
ethods: {
beforeunloadHandler(){
this.beforeUnload=new Date().getTime();
},
unloadHandler(e){
this.Handler=new Date().getTime()-this.beforeUnload;
//判斷是窗口關(guān)閉還是刷新
if(this.Handler<=5){
console.log('為所欲為');
}
},
}總結(jié)
到此這篇關(guān)于vue監(jiān)聽(tīng)瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件的文章就介紹到這了,更多相關(guān)vue監(jiān)聽(tīng)瀏覽器網(wǎng)頁(yè)關(guān)閉內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Vue 3.0 全家桶搶先體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue3實(shí)現(xiàn)局部頁(yè)面刷新效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue3如何采用 App.vue定義全局變量與方法并實(shí)現(xiàn)局部頁(yè)面刷新效果,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-01-01
解決vue.js出現(xiàn)Vue.js not detected錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決vue.js出現(xiàn)Vue.js not detected錯(cuò)誤的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
如何在Vue.js項(xiàng)目中使用Jest進(jìn)行單元測(cè)試
在眾多測(cè)試框架中,Jest?因其易用性、強(qiáng)大功能以及與?Vue.js?的良好兼容性,成為了許多開(kāi)發(fā)者的首選,本文將詳細(xì)介紹如何在?Vue.js?項(xiàng)目中使用?Jest?進(jìn)行單元測(cè)試,需要的可以參考下2024-11-11
Vue將數(shù)組轉(zhuǎn)換為樹(shù)形結(jié)構(gòu)的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了Vue將數(shù)組轉(zhuǎn)換為樹(shù)形結(jié)構(gòu)的兩種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
基于vue 開(kāi)發(fā)中出現(xiàn)警告問(wèn)題去除方法
下面小編就為大家分享一篇基于vue 開(kāi)發(fā)中出現(xiàn)警告問(wèn)題去除方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
原主流插件 vite-plugin-imagemin 已不兼容 Vite5,會(huì)導(dǎo)致構(gòu)建失敗,本文整理了 4 種適用于 Vite5 及以下版本的圖片壓縮方案,涵蓋插件化與自定義腳本,兼顧易用性與靈活性,需要的朋友可以參考下2025-08-08
解決vue-cli webpack打包開(kāi)啟Gzip 報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue-cli webpack打包開(kāi)啟Gzip 報(bào)錯(cuò)問(wèn)題的解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了使用vite項(xiàng)目打包資源分配目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07