vue3中setup语法糖使用keep-alive内置组件缓存路由

使用vue开发应用时，如果想缓存路由和组件是非常方便的，因为vue为我们提供了可以直接使用的内置组件<keep-alive>，并且包括了缓存的规则，由两个属性控制：include和exclude，使用方法如下：

1. 缓存所有组件
<keep-alive></keep-alive>

2. 缓存name名称为DemoA和DemoB的组件
<keep-alive include="DemoA, DemoB"></keep-alive> 

3. 缓存除了name名称为DemoC以外的其他所有组件 
<keep-alive exclude="DemoC"></keep-alive>

缓存路由的属性值为路由或组件中定义的name属性值，在vue2或vue3 setup函数写法中，我们都可以定义name属性，而vue3 setup语法糖写法中没法定义（有说组件的name属性值就是定义的文件名称，但是通过文件名进行缓存貌似不起作用），那怎么解决缓存问题呢？

1. 新增script标签定义name属性

这种方式可以解决问题，但是写法不友好，要写两个script标签

<script setup>
console.log("我是demo");
</script>
<script>
export default {
  name: 'DemoA'
}
</script>

2. 使用vite插件配置

插件名称：vite-plugin-vue-setup-extend

1. 安装

cnpm i vite-plugin-vue-setup-extend -D

2. 配置

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

3. 组件中写法，可以直接在script标签中写name属性

<script setup name="demo">
console.log("我是demo");
</script>