记录之：vue3.0 keep-alive 缓存指定页面

移动端实现返回保存原来的状态
比如：列表页刷新到第5页后，进入到详情页，再返回列表页的时候，保持数据在第5页
查了很多方法

第一个方法：浏览器返回键交互

最开始以为返回键是app自带的，需要和app交互，结果发现可以用浏览器的交互方法
使用了app的返回方法

onMounted(() => {
  // nodeData = taskDetailObj.value1;
  // createFlow();
  detailDataObject.detailParams = router.currentRoute.value.query;
  getTaskDetailData();
 
  

  window.addEventListener('popstate', popStateHandle, false)
});

const popStateHandle = function () {
  // console.log('detailDataObject.searchData111',sessionStorage.getItem("sesstionParams"))
   router.push({ path:`/home/index`,query:JSON.parse(sessionStorage.getItem("sesstionParams"))})
}
onUnmounted(() => {
    window.removeEventListener('popstate',popStateHandle, false);
})

这样出现的问题是，搜索条件是都可以带回去的，但是这个分页问题没办法解决，其实底层原理还是刷新了，是不过带着搜索条件

第二个方法：本地缓存

本地缓存的方法其实也是把搜索条件保存到session，遇到的问题一样，就是分页的问题
第三个方法：keep-alive
最后想到的方案是用vue的keep-alive
最开始的写法是这样的：

<keep-alive >
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

但是这样写并没有效果，考虑到是兼容问题，问了chartGPT ，结果说和2.0使用方法一下，如果写法都正确可以考虑其他问题，我就再考虑是否是其他内容影响了。最后用新项目实验，经历了各种奇淫巧计，各种排查，终于确定是2.0和3.0的写法不一样

3.0 keep-alive

vue3.0keep-alive是这种写法，但是存在一个问题，就是所有的页面都缓存了，详情页的节点图页不会发生变化了。根据经验，应该是只缓存列表页，详情页不要缓存

方法一：include
用上include后，所有的页面都不再缓存，从详情页回列表页有重新刷新了，所以这个方法有问题。

<div class="content-main">
      <router-view  v-slot="{ Component }">
        <keep-alive >
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>

最后查阅资料找到了这个方法

<div class="content-main">
      <router-view  v-slot="{ Component }">
        <keep-alive >
          <component :is="Component" v-if="$route.meta.keepAlive"/>
        </keep-alive>
        <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"></component>
      </router-view>
    </div>

问了ai，vue2.0 和vue3.0 keep-alive写法有区别吗？ai回复我没有区别，我信了，查了好久其他问题，结果后面发现还是写法不一样