Today I learned how Vue router transitions work depending on the component key, if router views are nested.
My nested route kept applying a transition but I didn’t want it to fade in/refreshing when navigating in a subcomponent/sub-route, so turns out the trick is to use the correct key.
I.e. consider which part of the path changes and use the correct one on the key
:
- route.fullPath
- route.params.id
- route.name
- And sometimes, not using a key at all!
<template>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<keep-alive :max="10">
<component :is="Component" :key="route.params.id" />
</keep-alive>
</transition>
</router-view>
</template>