vuejs关于微信返回按钮跳转指定地址或者无效

//如果有其他的路由跳转方法，那每个路由跳转前都要加上 thisObj.cancelBack() 这句话，是为了阻止其他事件触发返回按钮的事件
<script>
  import { mapState } from 'vuex'
  export default{
    name: 'index',
    data () {
      return {
      }
    },
    computed: mapState({
      listenFlag: state => state.listenFlag
    }),
    methods: {
      verify: function () {
        let thisObj = this
//listenFlag:对于这个变量的理解，也是不必须的，无论listenFlag是true还是false，只要在调用的方法中调用popstate监听事件就行。
        if (this.listenFlag) {
          window.popstate = function () {
            thisObj.cancelBack()
            window.location.href = '/Login'  //要跳转的链接
          }
          window.addEventListener('popstate', window.popstate, false)
        }
      },
      cancelBack: function () {
        this.$store.commit('listenFlag', false)
        window.removeEventListener('popstate', window.popstate)
      }
    },
    created: function () {
      this.verify() // 写在mounted方法中也可
    },
    // 该watch方法不必须
    watch: {
      '$route': 'verify'
    }
  }
</script>

关于微信返回按钮会返回router里的历史记录，从而返回到不想要返回的界面问题，上面是解决方案一，

方案二： 如果不想要返回到界面，即可将返回按钮无效化，定义一个全局的allowBack，在router里配置路由的meta属性，然后在App.vue里读取allowBack属性，为FALSE，则点击返回按钮无反应。

router配置：

{
      path: '/resume',
      components: {
        resumeContent: resumeContent
      },
      meta: {allowBack: false}  //配置meta，allowBack为false，则是返回按钮无效
}

permission.js代码：

import router from './router'
import store from "./store";

router.beforeEach((to, from, next) => {
  next();
  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)
});

router.afterEach(() => {
});

App.vue 配置：

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