禁止手机页面回退

js.

vue.
1.在路由配置中添加一个meta信息如:allowBack:false

 {
      path: '/',
      component: Index,
      meta:{
        title:'裂变商城-管理后台',
        allowBack: false
      }
    }

2.在vuex中设置一个变量allowBack:false,在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值，
vuex的store文件

state:{
allowBack: false
},

//mutations中加入更新allowBack的方法
    updateAppSetting(state,data){
        state.allowBack = data.allowBack
    },
//getters中加入返回的方法
    allowBack(){
        return state.allowBack
    }
    

main.js

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
  //====关键代码====
  let allowBack = true    //    给个默认值true
  if (to.meta.allowBack !== undefined) {
      allowBack = to.meta.allowBack
  }
  if (!allowBack) {
        history.pushState(null, null, location.href)
  }    
  store.commit('updateAppSetting', {
      allowBack: allowBack
  })
  //这段代码要写在next()的后面，因为写在next()前面location.href并不是to的地址
  //====关键代码====
})

3.在app.vue的mounted里面写onpopstate事件

mounted(){
    window.onpopstate = () => {
      let allowBack = this.$store.getters['allowBack']
        if (!allowBack) {    //    这个allowBack 是存在vuex里面的变量
            history.go(1)
        }
    }
  },