这是我的layout文件
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<KeepAlive :include="tagsViewStore.cachedViews">
<component :is="Component" />
</KeepAlive>
</transition>
</router-view>在pinia中实时记录需要缓存的组件名称，但是tagsViewStore.cachedViews 中需要组件名称的数字组，我们需要给每一个组件设置name属性才可以进行缓存。
参考若依的引用列表，发现若依使用了unplugin-vue-setup-extend-plus 配合<script name="xxxx"></script>来指定组件name，从而实现KeepAlive缓存组件状态，我们参考若依来实现一下这个功能。
这是若依关于缓存的说明：https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E9%A1%B5%E7%AD%BE%E7%BC%93%E5%AD%98
掘金这篇文章介绍的很详细：https://juejin.cn/post/7171343547495350302
1. 按照包的文档，我们来将包引入到项目中：
npm i unplugin-vue-setup-extend-plus2.在vite.config.ts中，使用插件
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
export default defineConfig({
plugins: [
vueSetupExtend({ /* options */ }),
],
})3.在script标签中添加name属性
<script setup lang="ts" name="debugging"></script>这样在F12在Vue插件中看当前组件就有名字啦 ！