nuxt3 keepalive 缓存页面

在使用nuxt3+vue3开发过程中发现列表跳转详情并没有缓存页面每次返回上一级的时候重新刷新页面了 于是发现  keepalive  可以缓存也确实生效了

app.vue

<nuxt-layout>

    <nuxt-page keepalive/>

  </nuxt-layout>

但是... 

还没有结束 并且只是个开始, 又发现 跳转详情的时候并没有重新获取数据路由也发生改变了,只有刷新才能重新获取数据,于是我又开始漫长的阅读文档发现了(keep-alive-props 可以设置哪些页面需要缓存哪些不需要) 但是并没有生效 我也不知道为什么..到现在也不知道,中间我又尝试设置definePageMeta.keepalive也是不生效没有任何反应  .......省略一大堆各种试验调试

进入正题,发现大概是每次进入页面是通过路由来进行缓存并没有在意我路由后面还拼接着参数发现必须设置page-key才能解决再次进入不一样商品的详情页面才会重新获取数据(就这么简单)被自己蠢哭了

app.vue

<nuxt-layout>

    <nuxt-page keepalive  :page-key="route => route.fullPath"/>

  </nuxt-layout>

-------------------------------------------------

<script setup>

const route = useRoute()

</script> 

没错解决了 又没结束 无语了从a返回到b时 如果a或者b滚动条不在最上面 返回时页面会闪动(我理解是因为先打开页面滚动条在b页面的位置然后滚动条又重新定位到上次a浏览的位置了....) 这个定位过程导致的闪动 ,不说了 我又要去读文档了...