vue瀏覽器返回監聽的具體步驟
阿新 • • 發佈:2021-02-06
前言
分享頁面時,希望點選瀏覽器回退按鈕,回到專案首頁,增加訪問量。
需要監聽瀏覽器的回退按鈕,並阻止其預設事件。
具體步驟如下:
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',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瀏覽器返回監聽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!