vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式
vue監(jiān)聽瀏覽器的后退和刷新事件
瀏覽器的后退事件
瀏覽器的后退按鈕,默認(rèn)是返回上一個(gè)路徑的頁(yè)面,可是如果我們當(dāng)前的頁(yè)面有數(shù)據(jù)沒有被保存的話,點(diǎn)擊后退按鈕應(yīng)該加一層判斷,也是提示用戶是否需要去保存頁(yè)面的內(nèi)容。
如果不保存,直接返回。
所以需要阻止瀏覽器的后退按鈕,只有在滿足了條件后才執(zhí)行事件
//1 首先進(jìn)入頁(yè)面的時(shí)候需要監(jiān)聽瀏覽器的后退按鈕,之后在操作的時(shí)候執(zhí)行函數(shù),在mounted中掛載去監(jiān)聽這個(gè)事件,并在methods里面添加函數(shù),用來判斷執(zhí)行的條件
mounted() {
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL)
window.addEventListener('popstate', this.back, false)
}
}
// 2:需要在退出頁(yè)面的時(shí)候銷毀這個(gè)監(jiān)聽事件
destroyed() {
window.removeEventListener('popstate', this.goBack, false)
},
// 3: 在methods中添加方法,在這里不是使用`this.$router.go(-1)`,因?yàn)槭褂梅祷厣弦徊降脑挘椒〞?huì)一直返回到第一個(gè)頁(yè)面,
methods: {
back() {
this.$confirm('檢測(cè)到未保存的內(nèi)容,是否在離開頁(yè)面前保存修改?', '確認(rèn)信息', {
distinguishCancelAndClose: true,
confirmButtonText: '保存',
cancelButtonText: '放棄修改'
})
.then(() => {
// this.$router.go(-1)
this.$router.push('/about')
// this.$message({
// type: 'info',
// message: '保存修改'
// });
})
.catch(action => {
this.$message({
type: 'info',
message: action === 'cancel' ?
'放棄保存并離開頁(yè)面' :
'停留在當(dāng)前頁(yè)面'
})
});
},
}
示例圖:

瀏覽器的刷新事件
和后退事件一個(gè)原因,因?yàn)槲覀冊(cè)谒⑿马?yè)面的時(shí)候,如果這個(gè)時(shí)候頁(yè)面的內(nèi)容沒有被保存的話,那之前的數(shù)據(jù)都會(huì)丟失,又需要重新填如數(shù)據(jù),這個(gè)時(shí)候肯定心情是比較煩躁的,所以就需要在刷新的時(shí)候去提示一下,用戶是否已經(jīng)保存了內(nèi)容,因?yàn)楝F(xiàn)在瀏覽器的刷新控件,無法自定義里面的內(nèi)容,只有默認(rèn)的彈出層控件。所以只能通過外面添加一層判斷,判斷是否已經(jīng)保存了數(shù)據(jù),如果沒有保存刷新的時(shí)候就提示,已經(jīng)保存的話就不提示
// 1 監(jiān)聽瀏覽器的刷新事件,注冊(cè)方法
mounted() {
// 監(jiān)聽瀏覽器的刷新事件
window.addEventListener('beforeunload', this.unload)
// window.addEventListener('beforeunload', e => this.unload) // 注冊(cè)一個(gè)匿名函數(shù)
}
// 2 銷毀這個(gè)監(jiān)聽事件
destroyed() {
// 銷毀這個(gè)監(jiān)聽事件,需要找到這個(gè)函數(shù),如果使用的是匿名函數(shù)的話,無法查找這個(gè)函數(shù),這個(gè)事件也就沒有辦法被移除 ,在其他頁(yè)面仍然會(huì)執(zhí)行這個(gè)監(jiān)聽事件
window.removeEventListener('beforeunload', this.unload)
},
// 3.methods添加方法
methods: {
unload(e) {
e = e || window.event
if (e) {
// 在這里阻止默認(rèn)的刷新,彈出彈框
e.returnValue = '關(guān)閉提示'
}
return '關(guān)閉'
}
}

vue禁止瀏覽器前進(jìn)和后退
最近在做著的這個(gè)項(xiàng)目發(fā)現(xiàn)了一些bug,當(dāng)用戶點(diǎn)擊瀏覽器的前進(jìn)和撤退的時(shí)候,上一頁(yè)數(shù)據(jù)保存了下來并沒有刷新頁(yè)面,這樣會(huì)出現(xiàn)很多奇奇怪怪的bug,我只希望用戶通過按鈕來跳轉(zhuǎn),然后就需要禁止瀏覽器的前進(jìn)和后退
main.js中,增加popstate監(jiān)聽
// 禁止瀏覽器前進(jìn)后退 另一部本在router的index.js中
window.addEventListener('popstate', function() {
history.pushState(null, null, document.URL)
})router的index.js中
// 禁止瀏覽器 前進(jìn)和后退,另一部分在main.js中
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior: () => {
history.pushState(null, null, document.URL)
}
})我一開始是想著監(jiān)聽瀏覽器返回上一步的時(shí)候,刷新頁(yè)面,但是思索直接把瀏覽器前進(jìn)和后退直接禁用了就可以了,而且代碼也會(huì)更好處理
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 路由子組件created和mounted不起作用的解決方法
今天小編就為大家分享一篇vue 路由子組件created和mounted不起作用的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用electron將vue-cli項(xiàng)目打包成exe的方法
今天小編就為大家分享一篇使用electron將vue-cli項(xiàng)目打包成exe的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法分析
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法,結(jié)合實(shí)例形式分析了vue.js針對(duì)導(dǎo)航隱藏與顯示的路由配置、事件監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
vite+vue3.0+ts+element-plus快速搭建項(xiàng)目的實(shí)現(xiàn)
本文將結(jié)合實(shí)例代碼,介紹vite+vue3.0+ts+element-plus快速搭建項(xiàng)目的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06
el-date-picker如何篩選時(shí)間日期選擇范圍
這篇文章主要介紹了el-date-picker篩選時(shí)間日期選擇范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-12-12
vue-cli中設(shè)置publicPath的幾種方式對(duì)比
這篇文章主要介紹了vue-cli中設(shè)置publicPath的幾種方式對(duì)比,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07

