vue 页面切换根据需求是否保持缓存问题

Vue项目:
vue 页面切换根据需求是否保持缓存问题_第1张图片
遇到需求:
在开发列表页和详情页的时候,遇到一个问题,当用户点击列表页跳转详情页,然后再返回列表页时,列表页会重新刷新,滚动条会到最上面,这样用户体验很差。而我想要的效果时当用户再次返回列表页时,内容应该是用户之前离开时候的内容,这样用户体验会好一点。
vue 页面切换根据需求是否保持缓存问题_第2张图片
图一 分类页
vue 页面切换根据需求是否保持缓存问题_第3张图片
图二 列表页
vue 页面切换根据需求是否保持缓存问题_第4张图片
图三 详情页

首先我先想到的是vue的keep-alive进行组件的缓存
vue 页面切换根据需求是否保持缓存问题_第5张图片
App.vue
vue 页面切换根据需求是否保持缓存问题_第6张图片
router.js

但实际情况和我想得不一样,当我列表页进入详情页,在返回列表页时,没有任何问题,还是我原来的位置,但是。。。,但我回到分类页,在进入列表页就会出现下面的情况
vue 页面切换根据需求是否保持缓存问题_第7张图片
之前的数据被缓存了,导致再次从分类页进入列表页,mescroll.js 上拉加载会在之前的数据上增加。这当然就是不行的,照我的想法,应该是用户从分类页进入列表页,是第一次加载的数据,所以我就放弃了keep-alive,这是一个伏笔。。。
然后我又想到了第二个方法,就是用cookie记录列表页点击进入详情页时,记住scrollTop的值,当用户从详情页返回列表页时,通过scrollTop的值,来让滚动条移动到用户离开的位置,最后离开列表页进入分类页时,将cookie清除,然而,想象很美好,现实很残酷。我没考虑到因为没有缓存,再次进入列表页数据会重新加载,又因为我是上拉加载的,导致如果用户是没有上拉加载数据就进入详情页,一切就如我想象一样美好,但是,要是用户上拉加载了新的数据,整个列表会变长,然后用户从详情页返回列表页时,因为数据重新加载,列表页重置,导致长度比离开之前的要小,最后,滚动条就只能移动到没上拉加载之前的数据那里。

问题又回到了原点,还是要缓存才行,但是我要解决的问题是,怎么让列表页进入详情页保持缓存,但分类页进入列表页又清除缓存?
然后我灵光一闪
vue 页面切换根据需求是否保持缓存问题_第8张图片
vue 页面切换根据需求是否保持缓存问题_第9张图片

我可以动态的修改 $route.meta.keepAlive 啊,哎,陷入了思维误区,浪费了我两个小时。。。
vue 页面切换根据需求是否保持缓存问题_第10张图片

在列表页跳转详情页的时候,将this. r o u t e . m e t a . k e e p A l i v e = t r u e ; 从 而 让 页 面 保 持 缓 存 , 当 退 出 列 表 页 进 入 分 类 页 时 , 将 t h i s . route.meta.keepAlive = true; 从而让页面保持缓存,当退出列表页进入分类页时,将this. route.meta.keepAlive=true;退this.route.meta.keepAlive = false; 让页面清除缓存。问题成功解决,完美!

你可能感兴趣的:(vue)