1. App.vue

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive" />
  </router-view>
</template>

2. 路由设置

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
}

3. keepAliveTest/index.vue

onActivated(()=>{
    console.log('进入页面',activityId)
    window.scrollTo(0, scrollHeight ? scrollHeight : 0)
})

onDeactivated(()=>{
   console.log('离开页面')
   //离开页面存储滚动条位置 scrollHeight
})

onMounted(() => {
    window.removeEventListener('scroll', handleScroll)
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll)
})

function handleScroll () {
   this.scrollTop = document.documentElement.scrollTop || window.pageYOffset
   this.clientHeight = document.body.clientHeight
},

4. 开关指定页面的缓存

import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from, next) => {
  //from 本页面， to  去哪个页面
  from.meta.keepAlive = true
  next()
})

5. 参考

https://blog.csdn.net/m0_46309087/article/details/109403655

6. 解决 keep-alive 情况下缓存与不缓存组件共存只需要一行简单的 key 配置

<router-view v-slot="{Component, route}">
  <keep-alive>
    <component :is="Component" :key="route.path + (route.meta.keepAlive ? '' : Math.random())" />
  </keep-alive>
</router-view>