Vue監(jiān)聽頁面刷新和關(guān)閉功能

發(fā)布時(shí)間：2020-09-06 14:21:46 來源：腳本之家閱讀：1167 作者：lakey0126 欄目：web開發(fā)

我在做項(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))
}

測(cè)試了頁面刷洗和關(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)閉功能，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

向AI問一下細(xì)節(jié)

Vue監(jiān)聽頁面刷新和關(guān)閉功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽