vue如何清除瀏覽器歷史棧
更新時(shí)間：2022年05月25日 10:51:31 作者：weixin_45108907
這篇文章主要介紹了vue如何清除瀏覽器歷史棧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
如何清除瀏覽器歷史棧
問(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ì)打開D頁(yè)面 再按手機(jī)返回鍵 會(huì)打開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)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
Vue路由對(duì)象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對(duì)象屬性 .meta $route.matched詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存
這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue?parseHTML?函數(shù)源碼解析AST基本形成
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)源碼解析AST基本形成，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vuex中g(shù)etters和actions的使用補(bǔ)充說(shuō)明
這篇文章主要介紹了在Vuex中關(guān)于getters和actions使用的補(bǔ)充作了簡(jiǎn)要說(shuō)明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-09-09
在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)
這篇文章主要介紹了在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法
這篇文章主要介紹了Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法,我們需要根據(jù)傳入值的類型,在placeholder屬性賦值"請(qǐng)輸入長(zhǎng)度",“請(qǐng)輸入寬度”,"請(qǐng)輸入厚度"等提示字符,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue-cli4打包靜態(tài)資源到指定目錄方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09