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

碳酸饮料

于 2022-02-17 09:03:00 发布

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签： vue.js html5 微信

本文链接：https://blog.csdn.net/CSDN_Hss/article/details/122975739

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该博客介绍了在iOS微信环境中遇到授权登录后页面未更新的问题及解决方案。通过监听`pageshow`事件并检测`persisted`属性，可以在页面从BFCache恢复时强制刷新，确保内容更新。这种方法适用于大部分浏览器，但需注意不同浏览器对BFCache的处理可能存在差异。代码实现仅需四行，特别针对iOS微信场景。

摘要由CSDN通过智能技术生成

场景：在微信中使用授权登录后物理返回页面未更新
解决方法：调用以下方法

// vue项目
mounted() {
	window.onpageshow = (event) => {
		if (event.persisted) window.location.reload();
	};
}

原理：pageShow事件在页面显示即会触发，无论页面是否来自BF Cache。通过检测persisted属性即可判断是否存在 BF Cache 行为。
优点：大部分浏览器都支持pageShow方法与persisted属性，并且需要的代码量只需要短短4行即可。
缺点：每种浏览器中BF Cache的机制是不同的，部分浏览器中的Bf Cache还是会重新执行js代码，会造成重复渲染效果。当然现在我们只考虑Ios中的微信页面，所以是不存在问题。