vue.js - 如何使用 Nuxt.js keep-alive Prop 从缓存中排除特定组件？

Question

我在使用 Nuxt.js keep-alive prop 时遇到问题，我正在尝试缓存除一个组件之外的所有组件，然后再次加载动态数据。但是所有组件都被缓存了，我不知道我做错了什么。这是在 Nuxt.js 中使用 keep-alive 的正确方法吗？

默认布局

<template>
  <div>
    <Nuxt keep-alive :keep-alive-props="{exclude: ['basket']}" />
  </div>
</template>

内篮

<template>
  <div>
    <h1>basket</h1>
    {{items}}
  </div>
</template>

<script>
export default {       
  async fetch() {
    let resp = await this.$axios.$get('api/items')
    this.items = resp.data
   },    
  fetchOnServer:false,
}
</script>

Vue 开发工具

Answer 1

keep-alive 只缓存页面组件，所以我假设 basket 是一个页面。

页面的组件名称是页面的相对路径。假设这个目录结构:

pages/
 - index.vue
 - basket.vue

...basket 页面的名称将是 "pages/basket.vue":

<Nuxt keep-alive :keep-alive-props="{exclude: ['pages/basket.vue']}" />

demo