Vue 3 保持活动的缓存路由

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"现在添加时，即使我重新访问相同的 URL，它每次都会进行 API 调用？

Answer 1

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

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