vue项目中监听手机物理返回键，js监听返回按钮，移动端，手机，

问题背景: 项目中用户总是可能误触到返回按钮，但此时可能并不希望返回，所以需要弹框进行确认操作。

原理：利用history 和 浏览器 刷新popstate状态 去实现

参考资料：https://blog.csdn.net/so12138/article/details/84250196

每一次返回都会去历史记录回退 -1 所以就在进入页面之前 往历史记录里面多记录一次当前页面的链接。然后再回退的时候监听刷新，去做一些事情。

1、挂载完成后，判断浏览器是否支持popstate

// BBBB.vue
mounted(){
  // 如果支持 popstate 一般移动端都支持了
  if (window.history && window.history.pushState) {
    // 往历史记录里面添加一条新的当前页面的url
    history.pushState(null, null, document.URL);
    // 给 popstate 绑定一个方法 监听页面刷新
    window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
  }
},

2、页面销毁时，取消监听。否则其他vue路由页面也会被监听

// BBBB.vue
destroyed(){
  window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件
},

3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写

methods:{
// BBBB.vue
  backChange() {
      const that = this;
      console.log("监听到了");
}

笔记：

微信关闭页面 ： wx.closeWindow();
微信JS-SDK Demo https://www.weixinsxy.com/jssdk/#menu-smart

history http://www.runoob.com/jsref/obj-history.html

Location 对象属性

length 返回历史列表的网址数量

Location 对象方法

back 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面

localtion: http://www.runoob.com/jsref/obj-location.html

Location 对象属性

hash 返回一个URL的锚部分
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL
pathname 返回的URL路径名。
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
search 返回一个URL的查询部分

Location 对象方法

方法 说明

assign() 载入一个新的文档
reload() 重新载入当前文档
replace() 用新的文档替换当前文档

下面代码是符合我自己项目中额外的操作

4. 走完上面你已经可以监听一次了，那么怎么执行多次监听呢；那就每次监听到再把当前历史记录赋值一次。

methods:{
// BBBB.vue
  backChange() {
      const that = this;
      console.log("监听到了");
      history.pushState(null, null, document.URL);
      setTimeout(() => {
        that.$vux.confirm.show({
          title: "确定离开当前页面？",
          hideOnBlur: true,
          // 组件除show外的属性
          onCancel() {
            // "取消操作";
            history.pushState(null, null, document.URL);
          },
          onConfirm() {
            that.$router.replace("#/AAAA");
          }
        });
      }, 100);
    },
}

5. 第四步做完之后 你就会发现用户好像确定跳转回去 AAAA 页面，再次返回又会跳转回 BBBB;

原因呢 跳转之前 多加了一条历史记录。
解决方案：每次跳转到AAAA的时候，history.go()到最开始进入页面的那一条记录。

// AAAA.vue
mounted() {
 if( window.history.length > 2 ){
      // 在手机上位了返回微信页面
      // alert(that.historyText.length)
      var ua = navigator.userAgent.toLowerCase();
       if ( browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
         //最开始进入页面的那一条记录
         let textNum = parseInt(window.history.length) - 1;
         // alert(textNum)
         history.go(-textNum);
        } else {
         //否则就是PC浏览器打开
          location.replace('#/AAAA');
        }    
  }
},
var browser = {
    versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {         //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}