vue瀏覽器返回監聽的具體步驟

Posted on by

前言

分享頁面時，希望點擊瀏覽器回退按鈕，回到項目首頁，增加訪問量。

需要監聽瀏覽器的回退按鈕，並阻止其默認事件。

具體步驟如下：

1、掛載完成後，判斷瀏覽器是否支持popstate

mounted(){
 if (window.history && window.history.pushState) {
 history.pushState(null, null, document.URL);
 window.addEventListener('popstate', this.goBack, false);
 }
},

2、頁面銷毀時，取消監聽。否則其他vue路由頁面也會被監聽

destroyed(){
 window.removeEventListener('popstate', this.goBack, false);
},

3、將監聽操作寫在methods裡面，removeEventListener取消監聽內容必須跟開啟監聽保持一致，所以函數拿到methods裡面寫

methods:{
 goBack(){
 this.$router.replace({path: '/'});
 //replace替換原路由，作用是避免回退死循環
 }
}

附：popstate用來做什麼的？

popstate的怎麼用？

HTML5的新API擴展瞭window.history，使歷史記錄點更加開放瞭。可以存儲當前歷史記錄點pushState、替換當前歷史記錄點replaceState、監聽歷史記錄點popstate。

pushState、replaceState兩者用法差不多。

使用方法：

history.pushState(data,title,url);
//其中第一個參數data是給state的值；第二個參數title為頁面的標題，但當前所有瀏覽器都忽略這個參數，傳個空字符串就好；第三個參數url是你想要去的鏈接；

replaceState用法類似，例如：history.replaceState("首頁","",location.href+ "#news");

總結

到此這篇關於vue瀏覽器返回監聽的文章就介紹到這瞭,更多相關vue瀏覽器返回監聽內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：