DDR爱好者之家

vue中解决微信html5原生ios虚拟键返回不刷新问题
站长资源 2024/5/18 佚名
40 1538
DDR爱好者之家 Design By 杰米

问题描述：

做微信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返回不刷新问题~欢迎小伙伴来交流

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米