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>