Vue Router中Keep-Alive Include属性不生效，如何仅缓存Inbox组件？

这个问题的核心是**keep-alive的include属性匹配的是组件自身的name选项，而不是路由配置里的name字段**。你现在只在路由里定义了路由的name: 'Inbox'，但对应的Inbox组件本身没有设置name属性，所以include="Inbox"无法匹配到目标组件，自然不生效。

只需要补充下面这个配置就能解决：

步骤1：给Inbox组件添加name选项 #

打开你的Inbox组件文件（比如Inbox.vue），在组件的export default对象里显式添加name属性，值和你keep-alive include里的名称完全一致：

<template>
  <!-- 组件原有内容 -->
</template>

<script>
export default {
  name: 'Inbox', // 必须添加这个，和include里的名称严格匹配
  // 其他组件配置：data、methods、生命周期钩子等
}
</script>

步骤2：确认现有配置无需修改 #

你的路由配置和App.vue里的keep-alive写法本身是正确的：

• 路由中path: '/'对应Inbox组件的配置没问题
• App.vue里<keep-alive include="Inbox"><router-view></router-view></keep-alive>的结构符合要求

当你给Inbox组件加上name: 'Inbox'后，keep-alive就会准确识别并缓存该组件，其他路由组件则不会被缓存。

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