Vue監(jiān)聽頁面刷新和關(guān)閉功能
我在做項(xiàng)目的時(shí)候，有一個(gè)需求，在離開（跳轉(zhuǎn)或者關(guān)閉）購物車頁面或者刷新購物車頁面的時(shí)候向服務(wù)器提交一次購物車商品數(shù)量的變化。
將提交的一步操作放到 beforeDestroy 鉤子函數(shù)中。
beforeDestroy() { console.log('銷毀組件'）
this.finalCart()},
但是發(fā)現(xiàn) beforeDestroy 只能監(jiān)聽到頁面間的跳轉(zhuǎn)，無法監(jiān)聽到頁面刷新和關(guān)閉標(biāo)簽頁。
所以還是要借助 onbeforeunload 事件。
順便復(fù)習(xí)了一下 JavaScript 中的一些加載，卸載事件：
- 頁面加載時(shí)只執(zhí)行 onload 事件。
- 頁面關(guān)閉時(shí)，先 onbeforeunload 事件，再 onunload 事件。
- 頁面刷新時(shí)先執(zhí)行 onbeforeunload 事件，然后 onunload 事件，最后 onload 事件。
Vue中監(jiān)聽頁面刷新和關(guān)閉
1. 在methods中定義事件方法：
methods: {
beforeunloadFn(e) {
console.log('刷新或關(guān)閉')
// ...
}
}
2. 在created 或者 mounted 生命周期鉤子中綁定事件
created() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}
3. 在 destroyed 鉤子卸載事件
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}
測試了頁面刷洗和關(guān)閉都能監(jiān)聽到。
回到我自己的項(xiàng)目，可以使用 onbeforeunload 事件和 beforeDestroy 鉤子函數(shù)結(jié)合：
created() {
this.initCart()
window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
this.finalCart() // 提交購物車的異步操作},
destroyed() {
window.removeEventListener('beforeunload', this.updateHandler)},
methods: {
updateHandler() {
this.finalCart()
},
finalCart() {
// ...
}
}
總結(jié)
以上所述是小編給大家介紹的Vue監(jiān)聽頁面刷新和關(guān)閉功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過來的值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
詳解使用VueJS開發(fā)項(xiàng)目中的兼容問題
這篇文章主要介紹了詳解使用VueJS開發(fā)項(xiàng)目中的兼容問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了解決vue-cli中stylus無法使用的問題方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06![Vue3配置路由ERROR in [eslint]報(bào)錯(cuò)問題及解決](http://img.jbzj.com/images/xgimg/bcimg3.png)
Vue3配置路由ERROR in [eslint]報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法
這篇文章主要為大家介紹了vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Pinia?是?Vue.js?的輕量級(jí)狀態(tài)管理庫,最近很受歡迎,它使用?Vue?3?中的新反應(yīng)系統(tǒng)來構(gòu)建一個(gè)直觀且完全類型化的狀態(tài)管理庫,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2023-10-10
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue?select?change事件如何傳遞自定義參數(shù)
這篇文章主要介紹了vue?select?change事件如何傳遞自定義參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04