我有一个列表页,是滚动加载的。每次从详情页返回,刷新数据的话,又从头开始,非常不便。
我研究了2天keep-alive,听说可以缓存数据,保存页面不变。我觉得这正是我需要的。
我按照文档,又按照网上的方法,试了一遍又一遍,终不得解。
怎么回事,为什么页面一直不缓存?为什么还是一次又一次刷新加载?
直到我看到这两段话,感到崩溃!!!
也就是说,keep-alive跟缓存,根本没有半毛钱关系!
缓存数据,唯一的逻辑是,离开需要缓存的页面时,把数据保存起来。再进入这个页面时,你自己决定要不要刷新,如果不要,就把你保存的数据填回来。
而keep-alive只是帮你记录一下,是否需要缓存。keep-alive有两个生命周期,分别是进入缓存组件和离开缓存组件触发。这样就可以在记录有缓存的组件里,调用这两个函数,把你的数据回显回来。
啊,我研究了2天的东西,被文档绕晕的东西,竟是如此简单,简直不可思议。
既然理通了思路,那我们来看看代码怎么写。
1.在app.vue里面,先把想要缓存的页面包裹起来。
<keep-alive>
<router-view
v-if="$route.meta && $route.meta.keepAlive"
:key="activeQuery"
/>
</keep-alive>
<router-view
v-if="!$route.meta || !$route.meta.keepAlive"
:key="activeQuery"
/>
2.在routes数组里,找到需要缓存的页面,标注是否需要缓存。
如果是不论任何条件,都缓存的话,keepAlive直接设置为true,或者keep-alive组件include属性直接设置名称就好。
这里设置的keepAlive是默认值 ,为了后面根据情况来判断是否要缓存。
{
path: "/AllPublished",