Vue KeepAlive多组件排除失效：仅单个组件生效求助

问题原因 #

KeepAlive 的 exclude 属性是通过组件的 name 选项进行匹配的，而非导入时的变量名或文件名。出现单个组件生效的情况，通常是两个原因：

• 未给未生效的组件设置正确的 name 选项
• exclude 字符串中逗号后带有空格，导致匹配的名称带空格，与组件实际 name 不匹配

解决方案 #

1. 修正 exclude 属性格式 #

去掉逗号后的空格，确保每个组件名称连续：

<KeepAlive exclude="DetailView,NewClaim">
    <router-view v-if="isAuthenticated"></router-view>
</KeepAlive>

2. 确保组件设置正确的 name #

检查两个组件的代码，显式声明 name 选项：

DetailView.vue（已生效，确认即可）

<script>
export default {
  name: 'DetailView'
  // 其他业务代码
}
</script>

NewClaim.vue（需要补充或修正）

如果是选项式API：

<script>
export default {
  name: 'NewClaim'
  // 其他业务代码
}
</script>

如果是 <script setup> 语法，需要用 defineOptions 显式设置：

<script setup>
defineOptions({
  name: 'NewClaim'
})
// 其他业务代码
</script>

内容的提问来源于stack exchange，提问作者RAGHAVENDRA DUBEY