CODEWITHSUNDEEP
htmlvue.jsvue-componentvue-routervuejs3
Tallboy
Tallboy

Reputation: 13417

Vue 3 keep-alive cache routes

I'm using Vue 3 <keep-alive>. When I don't use :key it caches (improperly across different URLs as expected).

By adding

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

I would think that it only makes an API call if the cache key doesnt exist, so that when I go to a different route and come back, it won't make a second api call.

But when I add :key="$route.fullPath" now it makes an API call every single time even if I revisit the same URL?

Upvotes: 6

Views: 8703

Answers (1)

Dan
Dan

Reputation: 63059

In Vue 3, put the key on the <component> rather than the <router-view>:

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

Upvotes: 24

Related Questions