Vue 3 keep-alive cache routes

user_794481 0
Viewed 3683

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?

vue-router vuejs3 vue-component vue.js html
1 Answers

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>
user_21850930
Related