vue 微信公众号开发，禁用手机返回键。或指定页面跳出微信公众号。

需求：

通过vue进行微信公众号开发（单页面），希望在微信公众号的首页，按下手机的返回键，退出公众号。而不是返回上一个访问页面。

通过vue-router + 监听onpopstate事件实现。

1.在路由中添加属性。（公众号首页面对应路由配置）

meta: {allowBack: false},

2.在beforeEach方法中添加如下代码（该代码段放在next()方法后面）

let allowBack = true
  if (to.meta.allowBack !== undefined) {
    allowBack = to.meta.allowBack
  }
  localStorage.setItem('allowBack', allowBack)
  // alert(11)
  if (!allowBack) {
    history.pushState(null, null, location.href)
  }

3.App.vue 中添加监听监听onpopstate事件，监听事件写在mounted的钩子函数中。

  mounted () {
    window.onpopstate = (e) => {
      let d = localStorage.getItem('allowBack')
      if (d === 'false') {
        if (e.target.location.hash === '#/list') { // 该路由为公众号首页配置的路由信息,如：/list
          const url = location.href.split('#')[0]
          if (url !== undefined) {
            wxCloseWechatWin()
          }
        } else {
          history.go(1)
        }
      }
    }
  }