Vue.js中keep-alive缓存(页面+滚动条)
1、要缓存的标签中加入
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
2、router文件中meta加入keepAlive
{
path: '/brandEquity',
name: 'brandEquity',
meta: {
title: '品牌权益',
keepAlive: true
},
component: () => import('@/views/pCenter/myRank/brandEquity')
}
const router = new VueRouter({
routes,
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
scrollBehavior 里处理是否使用路由缓存滚动条,由于本人用的mand-mobile里的md-scrollview包裹的列表,好像这个路由方法没生效。
3、处理缓存逻辑
只缓存从列表详情跳回列表的页面,在要缓存的vue页面内加入路由内守卫beforeRouteLeave
beforeRouteLeave (to, from, next) {
// ...
if(to.path == '/equityDetail'){
from.meta.keepAlive = true
}else{
from.meta.keepAlive = false
}
next()
}
- 首先,在跳转的时候,需要存一下滚动条的位置,即滚动元素的scrollTop;
- 由于页面加入keep-alive,vue只执行activated和deactivated两钩子,所以返回来逻辑需要在activated里写
- 代码如下:
//跳走存入
this.scrollTop = this.$refs.scrollView.getOffsets().top //这里使用mand-mobile的钩子方法,如不使用,将滚动元素的scrollTop存下即可
//this.scrollTop = this.$refs.wrapper.scrollTop;
//回来赋值
activated() {
this.$nextTick(() => {
setTimeout(() => {
//这里也是mand的钩子,如不用,用下边赋值
this.$refs.scrollView.scrollTo(0, this.scrollTop,true)
/*原生scroll
this.$refs.wrapper.scroll({
top: this.scrollTop,
left: 0,
behavior: "smooth" //滚动条平滑滚动
});
*/
}, 500);
})
}