快捷導(dǎo)航

Vue監(jiān)聽(tīng)頁(yè)面刷新和關(guān)閉功能

更新時(shí)間：2019年06月20日 14:33:23 作者：lakey0126

我在做項(xiàng)目的時(shí)候，有一個(gè)需求，在離開(kāi)（跳轉(zhuǎn)或者關(guān)閉）購(gòu)物車(chē)頁(yè)面或者刷新購(gòu)物車(chē)頁(yè)面的時(shí)候向服務(wù)器提交一次購(gòu)物車(chē)商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽(tīng)頁(yè)面刷新和關(guān)閉功能,需要的朋友可以參考下

我在做項(xiàng)目的時(shí)候，有一個(gè)需求，在離開(kāi)（跳轉(zhuǎn)或者關(guān)閉）購(gòu)物車(chē)頁(yè)面或者刷新購(gòu)物車(chē)頁(yè)面的時(shí)候向服務(wù)器提交一次購(gòu)物車(chē)商品數(shù)量的變化。

將提交的一步操作放到 beforeDestroy 鉤子函數(shù)中。

beforeDestroy() { console.log('銷(xiāo)毀組件'）
 this.finalCart()},

但是發(fā)現(xiàn) beforeDestroy 只能監(jiān)聽(tīng)到頁(yè)面間的跳轉(zhuǎn)，無(wú)法監(jiān)聽(tīng)到頁(yè)面刷新和關(guān)閉標(biāo)簽頁(yè)。

所以還是要借助 onbeforeunload 事件。

順便復(fù)習(xí)了一下 JavaScript 中的一些加載，卸載事件：

頁(yè)面加載時(shí)只執(zhí)行 onload 事件。
頁(yè)面關(guān)閉時(shí)，先 onbeforeunload 事件，再 onunload 事件。
頁(yè)面刷新時(shí)先執(zhí)行 onbeforeunload 事件，然后 onunload 事件，最后 onload 事件。

Vue中監(jiān)聽(tīng)頁(yè)面刷新和關(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))
}

測(cè)試了頁(yè)面刷洗和關(guān)閉都能監(jiān)聽(tīng)到。

回到我自己的項(xiàng)目，可以使用 onbeforeunload 事件和 beforeDestroy 鉤子函數(shù)結(jié)合：

created() {
 this.initCart()
 window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
 this.finalCart() // 提交購(gòu)物車(chē)的異步操作},
destroyed() {
 window.removeEventListener('beforeunload', this.updateHandler)},
methods: {
 updateHandler() {
  this.finalCart()
 },
 finalCart() {
  // ...
 }
}

總結(jié)

以上所述是小編給大家介紹的Vue監(jiān)聽(tīng)頁(yè)面刷新和關(guān)閉功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

vue中子組件如何間接修改父組件傳遞過(guò)來(lái)的值問(wèn)題
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過(guò)來(lái)的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
詳解使用VueJS開(kāi)發(fā)項(xiàng)目中的兼容問(wèn)題
這篇文章主要介紹了詳解使用VueJS開(kāi)發(fā)項(xiàng)目中的兼容問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
解決vue-cli中stylus無(wú)法使用的問(wèn)題方法
這篇文章主要介紹了解決vue-cli中stylus無(wú)法使用的問(wèn)題方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
Vue3配置路由ERROR in [eslint]報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法
這篇文章主要為大家介紹了vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
詳解vue-router 命名路由和命名視圖
這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
vue中狀態(tài)管理器Pinia的用法詳解
Pinia?是?Vue.js?的輕量級(jí)狀態(tài)管理庫(kù),最近很受歡迎,它使用?Vue?3?中的新反應(yīng)系統(tǒng)來(lái)構(gòu)建一個(gè)直觀且完全類(lèi)型化的狀態(tài)管理庫(kù),下面就跟隨小編一起來(lái)學(xué)習(xí)一下它的具體使用吧
2023-10-10
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
Tree-Shaking?機(jī)制快速掌握
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
vue?select?change事件如何傳遞自定義參數(shù)
這篇文章主要介紹了vue?select?change事件如何傳遞自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04