记一个Vue3 <keep-alive> 失效问题

1、keep-alive标签放置位置

注：keep-alive标签要放在a-layout标签里

<router-view v-slot="{ Component, route }">
    <transition>
      <keep-alive include="equipment-control">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
</router-view>

2、name定义

注：include中使用的name并不是注册的路由的name！！！所以要在vue3声明name属性

2.1 defineOptions语法糖

在对应的路由界面上写入

import { defineOptions } from "vue";
defineOptions({
    name:'my-page'
});

2.2 export default

适用于低版本的vue

<script>
export default {
  name: 'my-page'
};
</script>

3、include/excludex 写法

注：只能以字符串形式赋值

一个

<router-view v-slot="{ Component, route }">
    <transition>
      <keep-alive include="page1">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
</router-view>

多个，分割开来

<router-view v-slot="{ Component, route }">
    <transition>
      <keep-alive include="page1,page2,page3">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
</router-view>