keep-alive+router缓存

vue3中使用嵌套路由，并使用keep-alive缓存页面
vue3的前端开发中，列表页面和详情页面使用了嵌套路由，发现从详情页返回列表页时，列表页刷新，使用keep-alive进行缓存页面。

//组件写法

<router-view v-slot="{Component}">
    <keep-alive :include='["list"]' >
        <component :is="Component" :key="router.fullPath"/>
    </keep-alive>
</router-view> 

重点:
keep-alive标签的inclue中的数组，官网说明是属性name的配置，刚开始一直以为name是router-view的路由配置中的name，后来发现是组件的name属性。

vue3的写法：

<script setup>
import { defineOptions, ref, onMounted } from 'vue';

defineOptions({
    name: 'list',
});
</script>

原文链接（有效的解决办法）：https://blog.youkuaiyun.com/qq_40926572/article/details/143673353