Vue 3 keep-alive 缓存路由

Question

我正在使用 Vue 3 <keep-alive>。当我不使用 :key 时，它会缓存（如预期的那样不正确地跨越不同的 URL）。

通过添加

<router-view :key="$route.fullPath" v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

我认为如果缓存键不存在，它只会进行 API 调用，这样当我转到另一条路线并返回时，它不会进行第二次 api 打电话。

但是当我添加 :key="$route.fullPath" 现在它每次都会调用 API 即使我重新访问相同的 URL?

Answer 1

在 Vue 3 中，将 key 放在 <component> 而不是 <router-view> 上：

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" :key="$route.fullPath"></component>
  </keep-alive>
</router-view>

Vue 3 keep-alive cache routes