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('為所欲為');
}
},
}總結
到此這篇關于vue監(jiān)聽瀏覽器網(wǎng)頁關閉和網(wǎng)頁刷新事件的文章就介紹到這了,更多相關vue監(jiān)聽瀏覽器網(wǎng)頁關閉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中實現(xiàn)路由跳轉的三種方式超詳細教程，其中聲明式router-link實現(xiàn)跳轉最簡單的方法，可用組件router-link來替代a標簽，每種方式給大家講解的非常詳細需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue?鼠標移入移出(hover)切換顯示圖片問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了vue 面包屑導航組件封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
關于Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法
本文主要介紹了Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3+Element-Plus使用Table預覽圖片發(fā)生元素遮擋的解決方法
這篇文章主要介紹了Vue3+Element-Plus使用Table預覽圖片發(fā)生元素遮擋的問題分析和解決方法,文中通過代碼示例講解的非常詳細,對大家解決問題有一定的幫助,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了基于mpvue的簡單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vuex如何在非組件中調用mutations方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章給大家介紹了如何解決keep-alive同一個組件不緩存問題,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內部命令)
這篇文章主要介紹了vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內部命令),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。今天我們來介紹VueJs 搭建Axios接口請求工具，需要的朋友參考下本文吧2017-11-11