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

Vue项目：

遇到需求：
在开发列表页和详情页的时候，遇到一个问题，当用户点击列表页跳转详情页，然后再返回列表页时，列表页会重新刷新，滚动条会到最上面，这样用户体验很差。而我想要的效果时当用户再次返回列表页时，内容应该是用户之前离开时候的内容，这样用户体验会好一点。

图一 分类页

图二 列表页

图三 详情页

首先我先想到的是vue的keep-alive进行组件的缓存

App.vue

router.js

但实际情况和我想得不一样，当我列表页进入详情页，在返回列表页时，没有任何问题，还是我原来的位置，但是。。。，但我回到分类页，在进入列表页就会出现下面的情况

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

问题又回到了原点，还是要缓存才行，但是我要解决的问题是，怎么让列表页进入详情页保持缓存，但分类页进入列表页又清除缓存？
然后我灵光一闪

我可以动态的修改 $route.meta.keepAlive 啊，哎，陷入了思维误区，浪费了我两个小时。。。

在列表页跳转详情页的时候，将this.$route.meta.keepAlive=true;从而让页面保持缓存，当退出列表页进入分类页时，将this.$route.meta.keepAlive = false; 让页面清除缓存。问题成功解决，完美！