vue如何清除瀏覽器歷史棧
更新時間：2022年05月25日 10:51:31 作者：weixin_45108907
這篇文章主要介紹了vue如何清除瀏覽器歷史棧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何清除瀏覽器歷史棧
問題
需要跳轉(zhuǎn)好幾個頁面進行表單提交，提交完之后，跳轉(zhuǎn)回首頁，返回上一頁，發(fā)現(xiàn)還可以返回上一級頁面路由
//可以拿到歷史記錄棧，清空棧 let routeHistory=history.length-1; this.$router.go(-routeHistory);
vue返回首頁后如何清空路由
需求一：從首頁點擊路由到A頁面
- A頁面點擊路由到B頁面
- B頁面點擊路由到C頁面
- C頁面點擊路由鏈接到D頁面
- D頁面有個返回首頁按鈕
那么問題來了
點擊返回首頁后，再點擊手機的返回鍵 會打開D頁面 再按手機返回鍵 會打開C頁面，依次類推，
如何才能實現(xiàn)點擊返回首頁后，清空路由呢
mounted () {
? ? if (window.history && window.history.pushState) {
? ? ? ? // 向歷史記錄中插入了當(dāng)前頁
? ? ? ? history.pushState(null, null, document.URL);
? ? ? ? window.addEventListener('popstate', this.goBack, false);
? ? }
},
destroyed () {
? ? window.removeEventListener('popstate', this.goBack, false);
},
methods: {
? ? goBack () {
? ? ? ? // console.log("點擊了瀏覽器的返回按鈕");
? ? ? ? sessionStorage.clear();
? ? ? ? window.history.back();
? ? },
}?禁止有返回記錄
mounted () {
? ? if (window.history && window.history.pushState) {
? ? ? ? // 向歷史記錄中插入了當(dāng)前頁
? ? ? ? history.pushState(null, null, document.URL);
? ? ? ? window.addEventListener('popstate', this.goBack, false);
? ? }
},
destroyed () {
? ? window.removeEventListener('popstate', this.goBack, false);
},
methods: {
? ? goBack () {
? ? ? ? // console.log("點擊了瀏覽器的返回按鈕");
? ? ? ? history.pushState(null, null, document.URL);
? ? },
}?需求二：把瀏覽器的記錄返回指定的頁面
mounted 中：
?if (window.history && window.history.pushState) {
? ? ? history.pushState(null, null, document.URL);
? ? ? window.addEventListener("popstate", _this.onClickLeft, false); ?//_this.onClickLeft是返回的點擊事件
? ? }?methods: {
? ? onClickLeft() {
? ? // ? this.$route.query.radio支付頁面到指定頁面?zhèn)鞯膮?shù) 來判斷他的路由
? ? ? if (this.$route.query.radio == 1 || this.$route.query.radio == 2) {
? ? ? ? this.$router.push({ //返回指定頁面
? ? ? ? });
? ? ? } else {
? ? ? ? this.$router.go(-1); ?// 正常返回
? ? ? }
? ? },
// 將事件清除掉
?destroyed() {
? ? window.removeEventListener("popstate", this.onClickLeft, false);
? }以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了IE9 elementUI文件上傳的問題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對各位有所幫助2018-10-10
這篇文章主要介紹了vue進入頁面時滾動條始終在底部，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題
這篇文章主要介紹了Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇關(guān)于Vue項目安裝插件并保存，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在Vue里如何把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel的方法
這篇文章主要介紹了在Vue里如何把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue項目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法
這篇文章主要介紹了Vue項目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法,需要的朋友可以參考下2018-10-10
今天小編就為大家分享一篇在Vue組件中獲取全局的點擊事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router，這篇文章主要介紹了Vue?cli及Vue?router詳解,需要的朋友可以參考下2022-08-08