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 相关文章推荐
js 链式延迟执行DOME
Jan 04 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
社区(php&&mysql)五
2006/10/09 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python对常见数据类型的遍历解析
2019/08/27 Python
PyTorch预训练的实现
2019/09/18 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
python基于opencv实现人脸识别
2021/01/04 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
大学旷课检讨书
2014/01/28 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server