vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法
更新時(shí)間：2018年09月21日 15:47:48 作者：Tayshin
今天小編就為大家分享一篇vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
1、使用window.onunload之類的API
window.onbeforeunload = function (e) {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = '關(guān)閉提示';
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '關(guān)閉提示';
};
2、在生命周期鉤子中注冊(cè)監(jiān)聽事件
methods: {
beforeunloadHandler (e) {
// ...
}
}
在 mounted 鉤子中注冊(cè)事件
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
}
在 destroyed 鉤子卸載事件
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
}
以上這篇vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家分享了vue.js刪除列表中的一行的實(shí)例操作以及代碼分享，有興趣的朋友參考下。2018-06-06
詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
創(chuàng)建vue報(bào)錯(cuò)vue-cli Failed to download repo&n
通過vue-cli創(chuàng)建Vue項(xiàng)目時(shí),若遇到連接超時(shí)錯(cuò)誤,可采用離線方式解決,具體操作是下載并解壓vue-templates/webpack到本地.vue-templates目錄,再使用--offline參數(shù)重新執(zhí)行初始化命令2024-09-09
詳解Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對(duì)數(shù)組和對(duì)象的處理本質(zhì)上的一樣的,對(duì)新增的值添加響應(yīng)然后手動(dòng)觸發(fā)派發(fā)更新,需要的朋友可以參考下2023-11-11
Vue項(xiàng)目中使用addRoutes出現(xiàn)問題的解決方法
大家應(yīng)該都知道可以通過vue-router官方提供的一個(gè)api-->addRoutes可以實(shí)現(xiàn)路由添加的功能,事實(shí)上就也就實(shí)現(xiàn)了用戶權(quán)限,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下2021-08-08
vue實(shí)現(xiàn)數(shù)字滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家介紹了前端vue3架構(gòu)setup使用教程，詳細(xì)介紹?setup?的用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-02-02
vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解
在我們編寫css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))的相關(guān)資料,需要的朋友可以參考下2022-09-09