首页新闻找找看学习计划

vue 使用afterEach判断后用widow.localtion.reload刷新问题

0
悬赏园豆:5 [已解决问题] 解决于 2018-04-26 11:51

在vue项目中,遇到一个这样的问题:

A,B,C三个路由,A->B->C, 其中A->B每次进入都需要刷新, B和C可以来回多次切换并且B数据不刷新.

我的思路是:用keep-alive缓存组件, A->B时强制刷新页面.

实现A->B: 用afterEach判断to,from的name分别符合B和A时,用widow.localtion.reload()强制刷新B页面.

问题出现在了A->B中: 

以上思路实现的方法在Chrome和安卓机上没有问题,可以成功跳转到B页面并刷新,  但是在safari和IOS真机上都出现了A页面原地刷新,进入不到B中.

//A页面中的点击跳转行为

getCliam(){
  console.log('getCliam');
  this.$router.push('/claim/claimForm');
},

//main.js导航钩子函数

router.afterEach((to, from) => {
  if(to.name=='claimForm'&&from.name=='claimList'){
    console.log('afterEach')
    window.location.reload();
  }
})
 
哪位懂得大佬帮忙看下什么原因,难道有兼容性问题?或者以上不用跳转用keepAlive的一些处理方法实现A->B刷新新页面,B和C的都可以缓存?
 
非常感谢!
且醉的主页 且醉 | 初学一级 | 园豆:199
提问于:2018-04-23 19:15
< >
分享
最佳答案
0

页面跳转你为什么要刷新?

收获园豆:5
Grewer | 菜鸟二级 |园豆:254 | 2018-04-24 09:24

因为用了keepAlive缓存组件,A->B的过程如果再次进入会用之前缓存的B的页面不刷新

且醉 | 园豆:199 (初学一级) | 2018-04-24 09:29

@且醉: keepAlive 是可以控制某些路由缓存,某些路由不缓存的 ,百度一下即可

Grewer | 园豆:254 (菜鸟二级) | 2018-04-24 09:32

@Grewer: 有百度的,研究了一天,但不太符合我的需求.

默认显示A页面,B是一个很多数据的表单,B和C可来回切换最好是不要重新渲染数据,即B是要缓存的, 但是A->B的过程又不想缓存B,不知道怎么控制了

且醉 | 园豆:199 (初学一级) | 2018-04-24 09:39

@且醉: 进入 B 页面的时候判断一下来源,根据页面判断,是否将数据设置为默认值不就行了

Grewer | 园豆:254 (菜鸟二级) | 2018-04-24 09:56

@Grewer: 也想过这样,不过觉得初始化的数据也相对较多,所以想强制刷新一下省事,结果就遇到了这种问题.

且醉 | 园豆:199 (初学一级) | 2018-04-24 10:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册