如何使用 Nuxt.js 保持活动道具从缓存中排除特定组件？答案

【问题标题】：How to exclude specific component from caching Using Nuxt.js keep-alive props?如何使用 Nuxt.js 保持活动道具从缓存中排除特定组件？
【发布时间】：2021-07-25 13:03:25
【问题描述】：

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

Default layout

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

Inside basket

<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 开发工具

【问题讨论】：

你能给你的篮子组件一个name: 'basket'，看看这是否改变了什么？
我试过了，没有成功，路由过程中没有调用API
什么？您能否发一个minimal reproducible example 并更好地解释您想在这里做什么？目前尚不清楚，我们缺少信息。

标签： vue.js nuxt.js

【解决方案1】：

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

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

pages/
 - index.vue
 - basket.vue

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

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

demo

【讨论】：

The Nuxt documentation 建议您也可以排除非页面组件。 :keep-alive-props="{ exclude: ['modal'] }"、modal 显然不是页面组件。