本文探讨了在微信H5页面中，如何处理iOS设备返回时页面不刷新的问题，以防止重复支付。文章提到，Android手机在返回时会自动刷新，但iOS因微信webView版本问题会使用缓存。解决方案包括利用vue-router的路由钩子和监听popstate或pageshow事件，确保页面在返回时能正确更新状态。
在做微信h5页面的时候，我们需要返回时刷新前一个页面的数据，比如在页面A点击支付按钮跳转到页面B，从页面B返回时要获取当前订单的支付状态防止重复支付。
在安卓手机上不会有困扰，因为安卓手机在微信h5中返回都会刷新页面，而由于ios手机上的微信webView版本的问题，返回时会直接从缓存中拿而不会刷新页面。
解决这一问题想到了vue-router，vue-router不就是有路由钩子吗？它主要用的history的popstate/pushstate事件，具体的大家可以自行搜索用法，其兼容性可访问下面地址查看，基本大部分都可以支持
还有一种方式就是监听pageshow和pagehide事件，但是兼容性不太好，但我们可以作为当popstate不支持时的方案，万一不支持popstate的手机支持pageshow呢
整理后的代码如下
1.在跳转的位置做处理
// 在调跳转的时候调用replaceState，只有调用了replaceState或者pushState的才会在返回时触发popstate事件，使用pushState会多一个历史记录，所以使用replaceState
window.history.replaceState('', '', location.href);
// 在跳转到你想去的页面
window.location.href = 
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
