1.原生js方法

<script language="javascript">
  //防止頁面後退  使用在vue時 掛載到mounted中
  history.pushState(null, null, document.URL);
  window.addEventListener(‘popstate‘, function () {
     history.pushState(null, null, document.URL);
  });
</script>

2.vue中結合vuex方法

1.在路由配置中給這個路由添加meta信息，比如:

{
    path: 
 
‘/index‘,
    component: Index,
    meta: {allowBack: false}
}

2.在全局的router.beforeEach 函數裏面獲取allowBack的狀態，同時更新vuex的allowBack的值，

let allowBack = true    //    給個默認值true
if (to.meta.allowBack !== undefined) {
    allowBack = to.meta.allowBack
}
if (!allowBack) {
      history.pushState(null
 
, null, location.href)
}    
store.dispatch(‘updateAppSetting‘, {
    allowBack: allowBack
})

**這段代碼得寫在next()的後面，因為寫在next()前面location.href並不是to的地址，這點跟vue1.0有點不同。
location.href 獲取的仍不是to的地址，所以得根據to的信息來拼起來

3.接下來就是最核心的了，在app.vue的mounted裏面寫onpopstate事件：

window.onpopstate = () => {
    if (!this
 
.allowBack) {    //    這個allowBack 是存在vuex裏面的變量
        history.go(1)
    }
}

文章出處
--------------------- 
作者：LuviaWu 
來源：CSDN 

Vue-開發筆記-阻止頁面回退