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