一、问题场景

移动端项目基于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 具体步骤

  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("界面退出!");
  }
}
Logo

前往低代码交流专区

更多推荐