由于keep-alive页面部分数据要刷新，不能完全缓存，所以要使用beforeRouteEnter
Vue2 以及 Vue3 非 script setup 语法糖的beforeRouteEnter用法不多赘述

直接上代码

<script setup lang="ts">

import { ref, reactive, ComponentPublicInstance } from 'vue'

// * defineExpose暴露出来的方法，接口实现
interface IInstance extends ComponentPublicInstance {
  getData(): void
}

defineOptions({
  name: '***',
  beforeRouteEnter(_to, _from, next) {
    next((vm) => {
      const instance = vm as IInstance
      instance.getData() // 刷新列表数据（不缓存）
    })
  }
})

// 获取表格数据（示例方法）
const listData = ref([])
const getData = async () => {
  listData.value = []
}

// * beforeRouteEnter中要用到的方法，需要暴露出来
defineExpose({ getData })
</script>

总结

网上关于该问题的描述不多，整理了两个有效的供大家参考（这两个方法对我的项目不适用，最终在一个 script 标签中实现）：

• https://blog.richex.cn/vue3-how-to-use-beforerouteenter-in-script-setup-syntactic-sugar.html
• https://github.com/vuejs/rfcs/discussions/302#discussioncomment-2794537