vue監(jiān)聽瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件代碼示例
更新時(shí)間：2023年08月11日 11:00:58 作者：衫褲泡露
在前端開發(fā)中我們通常會(huì)遇到這樣的需求,用戶離開、刷新頁(yè)面前,修改數(shù)據(jù)未進(jìn)行保存操作,需要提示框提醒用戶,這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件的相關(guān)資料,需要的朋友可以參考下
1、監(jiān)聽瀏覽器頁(yè)面關(guān)閉/刷新事件
運(yùn)用場(chǎng)景：瀏覽器頁(yè)面關(guān)閉后刪除local storage、session、cookie、發(fā)送請(qǐng)求等。
//綁定監(jiān)聽事件
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
}
methods: {
beforeunloadHandler(e) {
console.log('關(guān)閉后=>為所欲為')
}
},
//頁(yè)面銷毀前解除監(jiān)聽
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
}2、只監(jiān)聽瀏覽器關(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)聽瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件的文章就介紹到這了,更多相關(guān)vue監(jiān)聽瀏覽器網(wǎng)頁(yè)關(guān)閉內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程，其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡(jiǎn)單的方法，可用組件router-link來(lái)替代a標(biāo)簽，每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
vue?鼠標(biāo)移入移出(hover)切換顯示圖片問題
這篇文章主要介紹了vue?鼠標(biāo)移入移出(hover)切換顯示圖片問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
關(guān)于Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法
本文主要介紹了Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法
這篇文章主要介紹了Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的問題分析和解決方法,文中通過代碼示例講解的非常詳細(xì),對(duì)大家解決問題有一定的幫助,需要的朋友可以參考下2024-04-04
基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解
這篇文章主要介紹了基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
vuex如何在非組件中調(diào)用mutations方法
這篇文章主要介紹了vuex如何在非組件中調(diào)用mutations方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章給大家介紹了如何解決keep-alive同一個(gè)組件不緩存問題,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令)
這篇文章主要介紹了vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。今天我們來(lái)介紹VueJs 搭建Axios接口請(qǐng)求工具，需要的朋友參考下本文吧2017-11-11