Vue · Senior · Question 61 of 75

How do you combine route transitions and `<KeepAlive>` with `<RouterView>`?

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <KeepAlive><component :is="Component" /></KeepAlive>
  </Transition>
</RouterView>

✓Correct answer: Use the v-slot of <RouterView> and wrap the rendered Component yourself
2Put <RouterView> inside <KeepAlive> directly
3It's impossible

Explanation

Vue Router 4 removed the old wrapper pattern; the slot gives full control over the order of wrappers.

Further reading

Test yourself

Take the Vue · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.