基于vue的移动端如何监听系统返回

一、问题场景

移动端项目基于vue框架搭建的微服务子应用，每个小功能都是独立存在；当我们退出某个功能页面，返回主页时使用的是手机系统自带的返回功能；未使用程序界面左上角返回按钮，这时候返回逻辑中的清除缓存操作没有执行，导致后台逻辑出现问题。

二、排查思路

2.1 问题原因

返回逻辑只有在界面左上角返回按钮点击时触发，这个时候如果使用手机系统自带返回按钮时无法执行退出逻辑；

2.2 尝试监听返回事件

首先尝试vue自带生命周期是否能够监听手机自带返回操作；

2.2.1 在销毁前/后 生命周期监听

在销毁前/后 （beforeDestroy / destroyed）两个生命周期都进行监听：

beforeDestroy() {
    alert("界面退出！");
},
destroyed() {
    alert("界面退出！");
},
1
2
3
4
5
6

退出功能时发现并没触发退出弹框；

2.2.2 在路由vue-router生命周期监听

当离开当前功能时界面路由会发生变化，想到使用组件路由生命周期（beforeRouteUpdate/beforeRouteLeave）进行监听:

// 路由地址发生改变时调用
beforeRouteUpdate(to, from, next) {
    alert("界面退出！");
    next();
},
// 离开当前路由时调用
beforeRouteLeave(to, from, next) {
    alert("界面退出！");
    next();

}
1
2
3
4
5
6
7
8
9
10
11

退出功能时发现并没触发退出弹框；

2.3 引发思考

vue提供的生命周期监听函数无法监听到手机系统返回按键；思考有没有其他方案可以监听到返回事件？

通过查询资料搜索发现可以通过window.history与浏览器监听事件popstate来实现监听。vue是基于原生js封装的框架，页面跳转原理上还是基于浏览器的路由的二次封装；因此当vue生命周期无法实现我们需求时，这个时候就要基于原生来想办法实现需求。

三、解决方案

3.1 核心思路

利用window.history与浏览器刷新popstate状态监听事件实现。

每当界面路由前进或是后退都会存储到history历史记录中，记录当前界面的路由链接；这个时候我们可以监听回退事件来做业务需求逻辑。

3.2 具体步骤

1. 在挂载完成阶段后监听popstate事件；
2. 页面销毁时，取消监听，防止其他界面影响；
3. 定义退出的业务逻辑，当触发popstate事件时调用；

3.3 实现代码

mounted() {
    if (window.history && window.history.pushState) {
      // 添加当前界面记录
      history.pushState(null, null, document.URL);
      // 监听页面刷新
      window.addEventListener("popstate", this.handleGoBack, false); 
    }
},
destroyed() {
    window.removeEventListener("popstate", this.handleGoBack, false); 
},
methods:{
  handleGoBack(){
    alert("界面退出！");
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16