vue怎么清除瀏覽器歷史棧

這篇文章主要介紹“vue怎么清除瀏覽器歷史棧”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue怎么清除瀏覽器歷史棧”文章能幫助大家解決問題。

如何清除瀏覽器歷史棧

問題

需要跳轉好幾個頁面進行表單提交，提交完之后，跳轉回首頁，返回上一頁，發現還可以返回上一級頁面路由

//可以拿到歷史記錄棧，清空棧
let routeHistory=history.length-1;
this.$router.go(-routeHistory);

vue返回首頁后如何清空路由

需求一：從首頁點擊路由到A頁面

• A頁面點擊路由到B頁面

• B頁面點擊路由到C頁面

• C頁面點擊路由鏈接到D頁面

• D頁面有個返回首頁按鈕

那么問題來了

點擊返回首頁后，再點擊手機的返回鍵 會打開D頁面 再按手機返回鍵 會打開C頁面，依次類推，

如何才能實現點擊返回首頁后，清空路由呢

mounted () {
    if (window.history && window.history.pushState) {
        // 向歷史記錄中插入了當前頁
        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) {
        // 向歷史記錄中插入了當前頁
        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支付頁面到指定頁面傳的參數 來判斷他的路由
      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);
  }

關于“vue怎么清除瀏覽器歷史棧”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。