Vue監(jiān)聽頁面刷新和關(guān)閉功能
更新時間：2019年06月20日 14:33:23 作者：lakey0126
我在做項目的時候，有一個需求，在離開（跳轉(zhuǎn)或者關(guān)閉）購物車頁面或者刷新購物車頁面的時候向服務(wù)器提交一次購物車商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽頁面刷新和關(guān)閉功能,需要的朋友可以參考下
我在做項目的時候，有一個需求，在離開（跳轉(zhuǎn)或者關(guān)閉）購物車頁面或者刷新購物車頁面的時候向服務(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 中的一些加載，卸載事件：
- 頁面加載時只執(zhí)行 onload 事件。
- 頁面關(guān)閉時，先 onbeforeunload 事件，再 onunload 事件。
- 頁面刷新時先執(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)聽到。
回到我自己的項目，可以使用 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)閉功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue中this.$http.post()跨域和請求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請求參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在看這篇文章的幾點要求：需要你先知道Vuex與Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vuex與Vue-Router的基本使用后再回來看這篇文章2022-11-11
uniapp是一款非常強大的跨平臺開發(fā)框架,它可以讓我們只編寫一份代碼,就能在多個平臺上運行,這篇文章主要給大家介紹了關(guān)于uniapp嵌套webview無法返回上一級的解決方式,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Intellij IDEA搭建vue-cli項目的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個級別的配置項,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue中關(guān)于confirm確認(rèn)框的用法
這篇文章主要介紹了vue中關(guān)于confirm確認(rèn)框的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
vue?element-plus中el-input修改邊框border的方法
element樣式還是蠻好的,只是有時候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下2022-09-09
想要實現(xiàn)一個簡潔版的Mini-Vue框架，應(yīng)該包含三個模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫模塊，本文主要介紹的是渲染系統(tǒng)模塊的實現(xiàn)，需要的可以參考一下2023-07-07
vue-cli開發(fā)時,關(guān)于ajax跨域的解決方法(推薦)
下面小編就為大家分享一篇vue-cli開發(fā)時,關(guān)于ajax跨域的解決方法(推薦)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02