如何使用Nuxt.js keep-alive props仅缓存指定单个组件？

你当前代码的问题在于 keep-alive 的 include 属性匹配的是组件的 name 属性，而非文件路径。要实现仅缓存指定页面，可按以下两种方式调整：

方法一：手动指定页面组件的 name #

1. 在目标页面 pages/settings/games.vue 中，显式声明组件名称：

<script>
export default {
  name: 'GamesSettingsPage' // 自定义组件名称
}
</script>

2. 在布局组件中，将 include 值替换为这个自定义名称：

<template>
  <v-container>
    <nuxt keep-alive :keep-alive-props="{ include: ['GamesSettingsPage'] }" />
  </v-container> 
</template>

方法二：使用 Nuxt 自动生成的组件名称 #

Nuxt 会为页面组件自动生成基于路径的 name，规则是将路径中的斜杠替换为横杠、去掉 .vue 后缀。比如 pages/settings/games.vue 对应的自动名称是 pages-settings-games，直接使用该值即可：

<template>
  <v-container>
    <nuxt keep-alive :keep-alive-props="{ include: ['pages-settings-games'] }" />
  </v-container> 
</template>

设置完成后，只有匹配 include 中指定名称的页面组件会被 keep-alive 缓存，其余页面不会进入缓存。

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