vue3 setup语法糖使用keepAlive

首先在相应的路由下添加meta

meta: { title: '缓存页面', keepAlive: true }

接下来在我们需要设置keep-alive的页面添加拦截判断，这里使用了include方法

<router-view v-slot="{ Component }">
  <transition name="el-zoom-in-top" mode="out-in">
     <keep-alive :include="keepAliveList">
       <component :is="Component"/>
   	 </keep-alive>
  </transition>
</router-view>

import { router } from '@/router'
import { watch } from 'vue'
  
const keepAliveList:any = []
watch(() => router.currentRoute.value,(val) => {
  if (val.meta.keepAlive && keepAliveList.indexOf(val.name) === -1) {
    keepAliveList.push(val.name)  
  }
},{immediate: true,deep: true})

下边是关键的一步，因为我们使用了setup语法糖，需要引入setup的一个插件：

npm i vite-plugin-vue-setup-extend

配置vite.config.ts

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

最后在相应的页面中配置name

<script lang="ts" setup name="keepAlivePage">
</script>

参考链接