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

2023-10-12 19:44
文章标签 vue 返回 移动 监听系统

本文主要是介绍基于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 具体步骤

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

这篇关于基于vue的移动端如何监听系统返回的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/198024

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

springMVC返回Http响应的实现

《springMVC返回Http响应的实现》本文主要介绍了在SpringBoot中使用@Controller、@ResponseBody和@RestController注解进行HTTP响应返回的方法,... 目录一、返回页面二、@Controller和@ResponseBody与RestController

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl