VUE 中 IOS 返回上一页，不触发刷新页面

最新推荐文章于 2024-03-14 17:54:20 发布
最新推荐文章于 2024-03-14 17:54:20 发布
阅读量684 收藏 4
点赞数
文章标签： vue.js iphone 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16088377/article/details/130950946
版权

在返回到的页面mounted中，输入一下代码

mounted() {
				// 兼容苹果跳转回退不刷新页面（不触发mounted）
				var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
				if (browserRule.test(navigator.userAgent)) {
					window.onpageshow = function(event) {
						if(event.persisted) {
							window.location.reload()
						}
					};
				}
				
			},

outluck
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js页面history.back()返回上一页，ios 不重新加载ready的解决办法
Angel_girl319的博客
05-27 552
1.在网上查找了一下有很多网友是这么写的： 在需要刷新的页面添加以下代码： let isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pa
html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...
weixin_32392583的博客
06-03 2279
我们知道，在JavaScript中提供了一个window.history.back()方法用于返回上一页，另外也可以使用window.history.go(-1)返回上一页(跳转)。在其他的主流浏览器中(Chrome、Firefox等)，使用这两个方法都会重新执行返回页面的JS。这就意味着，当文档加载完成事件函数中有刷新页面的操作代码的情况下，上一个页面会刷新。但是在Safari浏览器中则情况有一...
vue中解决微信html5原生ios虚拟键返回不刷新问题
01-18
问题描述： 做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会重新加载。 实现功能： 解决IOS问题(在home页面点返回时路由还是在home页面，并完成重新加载) 分析： 需要在进入页面时加入监听，并在页面离开时移除监听。因为home页面是个滚动列表，所以我采用了keep-alive路由缓存，所以不能在created()和beforeDestroy()生命周期中写，因此我在home.vue中加了组件内的守卫befo
js 页面history.back()返回上一页，ios 不重新加载ready的解决办法
weixin_33881140的博客
01-14 247
参考自 http://blog.csdn.net/hbts_901111zb/article/details/76691900 项目中，主页面有很多输入字段，当由主页跳转到子页面，将子页面的字段 set入localstorage中， 由于返回主页面不能将先前输入的字段刷新掉，所以必须要在子页面history.back()。 但由于ios和安卓机制不同，安卓会重新刷新主页面的...
VUE 返回上一页 不刷新页面 keep-alive
最新发布
li_qianqian_的博客
03-14 631
更深层次的原理可参考链接：https://juejin.cn/post/6844903918313406472。对应代码及所在的页面。
微信页面里iphone点返回不刷新问题
Baby_加油_的博客
01-09 6325
> 1.问题描述： 微信开发的时候，在公众号菜单中打开一个H5页面(如：分享的视频详情页面)，微信授权登录有跳转操作，点击左上角的返回按钮，(由于本页面第一次进来的时候没有加载完就发生了自身页面的跳转)，发现会出现卡死的情况。 解决方式1：微信页面里iphone点返回进行刷新操作 $(function() { pushHistory(); window.addE...
vue项目中ios某些机型前进后退时页面状态没有更新问题记录
Kratial的博客
02-10 818
vue项目中ios某些机型前进后退时页面状态没有更新问题记录
vue实现返回上一页面，页面停留在原来位置，不刷新
m0_50015961的博客
04-02 6346
有时候会有这种情况。从列表页面进入详情页面，然后点击返回的时候，我们的接口会重新调用，页面也会跑到顶部，这样用户体验是很不好的，每次用户都得从上往下从新翻，下面就给大家介绍如何解决这种问题 配置路由缓存 export default new Router({ routes: [ { path: '/hello', name: 'HelloWorld', component: HelloWorld, meta: { keepAl
Vue 实现重新进去页面，不刷新
weixin_42343966的博客
11-25 862
的命名是一样的，不然页面不会保留原本内容，会进行自动刷新。
导致VUE页面不刷新的几种情况以及解决方法
qq_30258721的博客
08-30 6139
参考文献 https://segmentfault.com/a/1190000022772025 1.Vue 无法检测实例被创建时不存在于 data 中的 property 原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 场景： var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{
vue返回上一页并不刷新
weixin_40791614的博客
02-27 1万+
vue返回上一页并不刷新 vue返回上一页并不刷新 1.首先添加keep-alive <keep-alive > <router-view :key="key" v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view :key="key" v-if="!$route.meta.keepAlive"></rou
vue返回上一页面时回到原先滚动的位置的方法
10-17
主要介绍了vue返回上一页面时回到原先滚动的位置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 返回上一页,页面样式错乱的解决
10-15
今天小编就为大家分享一篇vue 返回上一页,页面样式错乱的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue生命周期activated之返回上一页不重新请求数据操作
10-15
主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决ios端返回上一个页面不刷新页面的问题
热门推荐
web那些事
05-05 1万+
javascript返回上一个页面也许你会立马想到几种方案： 1.<a href="javascript:history.go(-1)">返回上一页</a> 2.<a href="javascript" onclick="history.back(); ">返回上一页</a> 3.<a href="javascript:" onclic...
vue中解决微信h5原生ios虚拟键返回不刷新问题
weixin_44824839的博客
10-20 965
问题描述：在安卓机上点击手机自带的返回键会返回上一级路由并重新加载，而ios机上并不会重新加载 分析：需要在进入页面时加入监听，并在页面离开时移除监听。因为home页面是个列表滚动，所以采用了keep-alive路由缓存，所以不能在mounted()和beforeDestroy()生命周期中写，因此我在home.vue中加了组件内的守卫beforeRouteEnter()，beforeRouteLeave (),并在里面添加监听、移除监听。 注意： addEventListener()与removeEven
解决ios设备浏览器页面回退但内容不刷新导致的问题
哼
08-01 688
项目是一个php前后端不分离项目，分为移动端和pc端，但用的基本是一套代码，在每个页面中调用判断当前是否为移动端的函数去动态的加载pc或移动端所需的css、js和dom结构代码。：今天碰到的提测的一个bug是：设备在操作部分页面后点击浏览器后退按钮，会直接显示pc端的样式，需手动刷新页面才显示移动端样式，用户交互体验差。：经过排查后发现，只有ios设备在用浏览器浏览的时候会出现以上问题，用微信内置浏览器查看没有上述问题，安卓设备也没有上述问题。
Vue IOS端跳转后返回页面不刷新问题解决
ilovexiaoming1的博客
12-13 3184
方法一： we码用了，生效 mounted () { this.$nextTick(()=>{ //首页跳转至门诊或者商城返回 IOS不兼容页面自动刷新问题 var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1; //android终端或者uc浏览器 var isiOS = !!u.match
vue 返回上一页不刷新页面
06-12
在 Vue 中，可以通过使用 `router.go(-1)` 方法返回上一页。如果你希望返回上一页时不刷新页面，可以通过给路由添加 `keep-alive` 属性来实现。 具体来说，你可以在需要保留状态的组件的父组件上添加 `keep-alive`，例如： ``` <keep-alive> <router-view></router-view> </keep-alive> ``` 这将会缓存这个路由下的所有组件。当你使用 `router.go(-1)` 方法返回上一页时，之前的组件状态将会被保留，不会被重新渲染。同时，如果你希望某个组件不被缓存，可以在组件上添加 `exclude` 属性，例如： ``` <keep-alive exclude="ComponentName"> <router-view></router-view> </keep-alive> ``` 这将会排除名为 `ComponentName` 的组件不被缓存。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值