Vue-阻止頁面回退

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