做列表缓存的时候,受益于@ vonvon_chris 这篇文章
原文链接https://blog.csdn.net/akony/article/details/79203745
实现了返回不刷新页面,当需要局部刷新的时候,使用activated的生命周期
activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在 。
使用中遇到的问题
1、因列表页滑动一定距离,进入详情页的时候,会造成详情页有移动距离,可能跟我的布局有关。
解决办法:
mounted() {
//此处必须写兼容模式,否则真机存在异常。
if(document.body.scrollTop||document.documentElement.scrollTop){
document.body.scrollTop=0;
document.documentElement.scrollTop=0;
}
//在mounted中获取参数时,为防止保错,我们应处理一下this.$route.query。
let id = (this.$route.query || {}).id;
.....do something
}
2、若有需求在返回后,停留在以前的位置,需要设置 router为history模式并添加函数如下:
export default new Router({
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}else {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop;
}
return { x: 0, y: to.meta.savedPosition ||0}
}
},
routes: [{
path: '/home',
name: 'home_index',
component: home,
meta: {
keepAlive: true
}
},]
})
3、缓存页分享:
在活动详情页请求完数据,可以初始化分享标题,图片和文案等,但是,用户返回的别的页面的时候,分享文案还在这个页面的
1、在没有缓存的时候,可以在beforeDestroy()生命周期,进行初始化通用分享。
2、在设有缓存的时候,需要在deactivated()生命周期(缓存不活动的状态),初始化通用分享。