vue利用keep-alive缓存页面

我有一个列表页，是滚动加载的。每次从详情页返回，刷新数据的话，又从头开始，非常不便。

我研究了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",