keep-alive include exclude 不生效的原因

⚠️ keepalive的include和exclude里面所需要的name是组件的name 并不是路由的name

⚠️如果组件内没有name 需要手动添加才会生效

⚠️如果使用逗号分隔 name 需要在name前面添加空格

版本vue2.0可以直接写name

版本为vue3.0并且使用了<script setup>需要再添加一个<script>并且添加上name 

版本为vue3.2并且使用了<script setup>无需手动添加name，name会自动根据文件名生成

tips：可以使用actived和deactived两个生命周期去判断组件是否被缓存了 如果缓存了会调用actived

路由🌰

//方式1 - 数组
        <router-view v-slot="{ Component }">
          <keep-alive :exclude="['demo','demo2']">
            <component :is="Component" />
          </keep-alive>
        </router-view>
//方式2 -字符串
<router-view v-slot="{ Component }">
    <KeepAlive include="demo, demo2">
      <component :is="Component" />
    </KeepAlive>
</router-view>
//方式3 -正则
<router-view v-slot="{ Component }">
    <KeepAlive :include="/demo|demo2/">
      <component :is="Component" />
    </KeepAlive>
</router-view>

2.0 组件demo：

<script>
export default {
    name:'demo'
}
</script>

3.0 组件demo

<script>
export default{name:'demo'}
</script>
<script setup>
</script>

特别注意：import 需要写在顶层script

特别注意： 正常keepAlive mounted只在第一次执行 再次进入后mounted不再执行

vue3 如果mounted 在增加keepalive之后仍然执行 那么我们可以去掉 key值

就是因为key值不通所以判断 需要重新执行