vue 移動端禁止瀏覽器后退，禁止安卓和ios點擊后退操作亂跳頁面

開發微信公眾號網頁，頁面登錄成功之后，是禁止再次返回到登錄頁。

我在頁面設置了讓禁止跳到登錄頁，可是在手機上有自帶的微信瀏覽器后退按鈕，所以必須要禁止瀏覽器后退，才能禁止后退到登錄頁。

剛開始百度，查到了一個vue禁止瀏覽器后退的插件：vue-prevent-browser-back

首先，npm i  vue-prevent-browser-back  -save

然后在需要禁止瀏覽器后退的頁面里引入：

 Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  import preventBack from 'vue-prevent-browser-back';//組件內單獨引入
  export default {
    name: "main",
    mixins: [preventBack],//注入
    data() {
      return {
        userId:394,
        selected:'1',
        ReSelect:''
      };
    },

這個插件是可以禁止瀏覽器后退，但是它有個問題：就是它把你頁面里添加的后退操作也給禁止了。這是肯定不行了。

所以這個插件只適用於單頁面沒有路由返回跳轉的頁面。

然后我就用了下面的代碼，解決了僅僅是禁止瀏覽器后退，頁面內部的返回無影響。在想要禁止瀏覽器后退的頁面加上下面這段代碼：

 

  mounted(){
      //防止頁面后退
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
      this.getProductBrand(0,'',0);

    }