建设通网站官网登录,营销推广网,wordpress首页字符,做网站需要买ip地址吗一、问题场景
移动端项目基于vue框架搭建的微服务子应用#xff0c;每个小功能都是独立存在#xff1b;当我们退出某个功能页面#xff0c;返回主页时使用的是手机系统自带的返回功能#xff1b;未使用程序界面左上角返回按钮#xff0c;这时候返回逻辑中的清除缓存操作没…一、问题场景
移动端项目基于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(界面退出);}
}
