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)文章
這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue中this.$http.post()跨域和請(qǐng)求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請(qǐng)求參數(shù)丟失的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在看這篇文章的幾點(diǎn)要求：需要你先知道Vuex與Vue-Router是個(gè)什么東西，用來(lái)解決什么問(wèn)題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vuex與Vue-Router的基本使用后再回來(lái)看這篇文章2022-11-11
uniapp嵌套webview無(wú)法返回上一級(jí)解決方式
uniapp是一款非常強(qiáng)大的跨平臺(tái)開(kāi)發(fā)框架,它可以讓我們只編寫(xiě)一份代碼,就能在多個(gè)平臺(tái)上運(yùn)行,這篇文章主要給大家介紹了關(guān)于uniapp嵌套webview無(wú)法返回上一級(jí)的解決方式,需要的朋友可以參考下2024-05-05
Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟
這篇文章主要介紹了Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue中關(guān)于confirm確認(rèn)框的用法
這篇文章主要介紹了vue中關(guān)于confirm確認(rèn)框的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
vue?element-plus中el-input修改邊框border的方法
element樣式還是蠻好的,只是有時(shí)候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下2023-07-07
vue-cli開(kāi)發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)
下面小編就為大家分享一篇vue-cli開(kāi)發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02