vue中解决微信html5原生ios虚拟键返回不刷新问题


Posted in Javascript onOctober 20, 2020

问题描述:

做微信h5页面时,经过了微信授权才跳转到一级默认路由home.vue中,因此在home页面时在IOS中底部会出现虚拟的返回键,安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载,但是在安卓机上点击返回键会重新加载。

实现功能:

解决IOS问题(在home页面点返回时路由还是在home页面,并完成重新加载)

分析:

需要在进入页面时加入监听,并在页面离开时移除监听。因为home页面是个滚动列表,所以我采用了keep-alive路由缓存,所以不能在created()和beforeDestroy()生命周期中写,因此我在home.vue中加了组件内的守卫beforeRouteLeave ()在里面移除监听,在activated()中添加监听。
如果页面没有采用路由缓存,则监听事件和移除事件可以在created()和beforeDestroy()这两个生命周期函数中写。

注意:

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数:事件名、事件处理的函数和布尔值。
布尔值参数是true,表示在捕获阶段调用事件处理程序;
如果是false,表示在冒泡阶段调用事件处理程序。

相同事件绑定和解除,需要使用共用函数;如果removeEventListener不生效,可以看看这篇文章:https://blog.csdn.net/amyleeYMY/article/details/83382741

//监听返回按钮,重新加载当前页面
window.history.pushState(state, title, utl)//在页面中创建一个 history 实体,直接添加到历史记中。
参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。
title:历史记录的标题(目前浏览器不支持)。
url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

最终代码:

home.vue

activated(){
  //在页面中创建一个 history 实体,当实体改变时会触发popstate事件,跳转到当前页面,并重新加载当前页面
  window.history.pushState(null, 'ff', document.URL);
  window.addEventListener('popstate',this.reload,true)
 }
 
 //本来在deactivated中写移除事件监听的,但是发现不能移除,可能这个生命周期是在路由跳转完(keep-alive缓存的组件停用时调用)从而找不到那个this了,所以移除监听失败。
 deactivated(){
   window.removeEventListener('popstate',this.reload,true)
 }
 
 //所以采用组件内的路由守卫beforeRouteLeave,成功解决了移除监听事件。
 beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  window.removeEventListener('popstate',this.reload,true) //这个一定要写到next()前面
  next()
 }
methods:{
reload(){
  window.location.reload()//重新加载
 }
}

main.js

import {Component} from "vue-property-decorator";
Component.registerHooks([
 'beforeRouteLeave',
]);

就这样成功的解决IOS返回不刷新问题~欢迎小伙伴来交流

到此这篇关于vue中解决微信html5原生ios虚拟键返回不刷新问题的文章就介绍到这了,更多相关微信html5原生ios虚拟键返回不刷新内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
vue-router传参用法详解
Jan 19 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
原生js实现俄罗斯方块
Oct 20 #Javascript
React实现评论的添加和删除
Oct 20 #Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 #Javascript
微信小程序使用前置摄像头拍照
Oct 22 #Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
vue3为什么要用proxy替代defineProperty
Oct 19 #Javascript
You might like
真正的ZIP文件操作类(php)
2007/07/21 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python检测网站链接是否已存在
2016/04/07 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python requests.get带header
2020/05/05 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
5s标语大全
2014/06/23 职场文书
小学数学教研活动总结
2014/07/01 职场文书
学校与家长安全责任书
2014/07/23 职场文书
司机岗位职责
2015/02/04 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
个人售房合同协议书
2016/03/21 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python