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

一、问题场景

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

二、排查思路

2.1 问题原因

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

2.2 尝试监听返回事件

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

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

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

beforeDestroy() {alert("界面退出！");
},
destroyed() {alert("界面退出！");
},

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

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

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

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

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

2.3 引发思考

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

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

三、解决方案

3.1 核心思路

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

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

3.2 具体步骤

在挂载完成阶段后监听popstate事件；
页面销毁时，取消监听，防止其他界面影响；
定义退出的业务逻辑，当触发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("界面退出！");}
}