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

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

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

每一次返回都会去历史记录回退 -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()
}

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