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