vue利用popstate實(shí)現(xiàn)處理頁面返回的方法

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹vue利用popstate實(shí)現(xiàn)處理頁面返回的方法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

需求背景：項(xiàng)目中需要做一個(gè)返回確認(rèn)，避免用戶誤觸返回鍵而退出當(dāng)前頁面。

原理：利用history和瀏覽器刷新popstate狀態(tài)

實(shí)現(xiàn)：

1、在mounted() 階段判斷并添加popstate事件監(jiān)聽，History.pushState()（參數(shù)：一個(gè)狀態(tài)對(duì)象，一個(gè)標(biāo)題（現(xiàn)在被忽略了），以及一個(gè)可選的URL地址）， 注意：IOS版的微信，是會(huì)立即觸發(fā)popstate事件，所以需要pageshow做下處理，（當(dāng)一條會(huì)話歷史記錄被執(zhí)行的時(shí)候?qū)?huì)觸發(fā)頁面顯示(pageshow)事件。(這包括了后退/前進(jìn)按鈕操作，同時(shí)也會(huì)在onload 事件觸發(fā)后初始化頁面時(shí)觸發(fā))）

2、在methods里定義監(jiān)聽操作函數(shù)

3、頁面銷毀時(shí)，取消監(jiān)聽。（注意：一定要取消監(jiān)聽，否則其他vue路由頁面也會(huì)被監(jiān)聽）

補(bǔ)充知識(shí)：vue項(xiàng)目監(jiān)測(cè)瀏覽器返回按鈕

在WebApp或?yàn)g覽器中，會(huì)有點(diǎn)擊返回、后退、上一頁等按鈕實(shí)現(xiàn)自己的關(guān)閉頁面、調(diào)整到指定頁面、確認(rèn)離開頁面或執(zhí)行一些其它操作的需求?？梢允褂?popstate 事件進(jìn)行監(jiān)聽返回、后退、上一頁操作。

簡(jiǎn)單介紹history中的操作

window.history.back()，后退

window.history.forward()，前進(jìn)

window.history.go(num),前進(jìn)或后退指定數(shù)量歷史記錄

window.history.pushState(state,title,url),在頁面中穿件一個(gè)history實(shí)體。直接添加到歷史記錄中。參數(shù)： state:儲(chǔ)存一個(gè)對(duì)象，可以添加相關(guān)信息，可以使用history.state讀取其中的內(nèi)容。title: 歷史記錄的標(biāo)題，url:創(chuàng)建的歷史記錄rul，進(jìn)行歷史記錄操作時(shí)會(huì)跳轉(zhuǎn)到該鏈接。

window.history.replaceState()，修改當(dāng)前的history實(shí)體。

popstate事件，history實(shí)體改變時(shí)觸發(fā)事件

window.history.state,會(huì)獲得history實(shí)體中的state對(duì)象。

使用方法

取消默認(rèn)的返回操作

添加一條history實(shí)體作為替代原來的history實(shí)體

mounted () {
 if(window.history&&window.history.pushState){
 history.pushState(null,null,document.URL)
 window.addEventListener('popstate', this.goBack, false);
 }
},
destroyed(){
 window.removeEventListener('popstate',this.goBack,false);
},
methods:{
 goBack(){
 this.$router.replace({path:'/'});
 //replace替換原路由，作用是避免回退死循環(huán)
 }
}

關(guān)于vue利用popstate實(shí)現(xiàn)處理頁面返回的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。