vue瀏覽器返回監(jiān)聽的具體步驟
更新時間：2021年02月03日 14:48:10 作者：不求甚解bc
這篇文章主要給大家介紹了關于vue瀏覽器返回監(jiān)聽的具體步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
分享頁面時，希望點擊瀏覽器回退按鈕，回到項目首頁，增加訪問量。
需要監(jiān)聽瀏覽器的回退按鈕，并阻止其默認事件。
具體步驟如下：
1、掛載完成后，判斷瀏覽器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
2、頁面銷毀時，取消監(jiān)聽。否則其他vue路由頁面也會被監(jiān)聽
destroyed(){
window.removeEventListener('popstate', this.goBack, false);
},
3、將監(jiān)聽操作寫在methods里面，removeEventListener取消監(jiān)聽內容必須跟開啟監(jiān)聽保持一致，所以函數拿到methods里面寫
methods:{
goBack(){
this.$router.replace({path: '/'});
//replace替換原路由，作用是避免回退死循環(huán)
}
}
附：popstate用來做什么的？
popstate的怎么用？
HTML5的新API擴展了window.history，使歷史記錄點更加開放了?？梢源鎯Ξ斍皻v史記錄點pushState、替換當前歷史記錄點replaceState、監(jiān)聽歷史記錄點popstate。
pushState、replaceState兩者用法差不多。
使用方法：
history.pushState(data,title,url); //其中第一個參數data是給state的值；第二個參數title為頁面的標題，但當前所有瀏覽器都忽略這個參數，傳個空字符串就好；第三個參數url是你想要去的鏈接；
replaceState用法類似，例如：history.replaceState("首頁","",location.href+ "#news");
總結
到此這篇關于vue瀏覽器返回監(jiān)聽的文章就介紹到這了,更多相關vue瀏覽器返回監(jiān)聽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇vue.js 實現a標簽href里添加參數，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue使用file-saver本地文件導出,大家需要安裝xlsx和file-saver，然后創(chuàng)建localExports.js文件，具體實現代碼跟隨小編一起看看吧2022-01-01
在項目開發(fā)的時候很多人都會用到圖片上傳,本文主要介紹了element-ui中up-load組件實現圖片上傳回顯,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue 行為驗證碼之滑動驗證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復制到所使用的components目錄下，本文給大家詳細講解，需要的朋友可以參考下2023-05-05
Vue的響應式實現是借助Object.defineProperty通過重寫getter和setter方法來進行的數據劫持，Vue3通過Proxy代理攔截對象中任意屬性的變化，通過Reflect反射對源對象的屬性進行操作，然后再在get里收集依賴在set里派發(fā)更新2023-03-03
這篇文章主要介紹了手寫Vue2.0 數據劫持的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了解決vue字符串換行問題(絕對管用)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue+element搭建后臺小總結 el-dropdown下拉功能
這篇文章主要為大家詳細介紹了vue+element搭建后臺小總結，el-dropdown下拉功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要給大家介紹了關于vuex使用方法的相關資料,主要內容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了淺談nuxtjs校驗登錄中間件和混入(mixin)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11