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

(编辑:jimmy 日期: 2024/12/24 浏览:2)

问题描述:

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

一句话新闻

一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?