Transitions

The RouterView component provides a default slot to support layering in a Vue transition if desired.

<router-view>
  <template #default={ component }>
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </template>
</router-view>

Avoid Reusing Components

Vue will occasionally reuse components if a route change ends up rendering the same underlying component. You avoid this by using the key attribute.

<router-view>
  <template #default={ component, route }>
    <transition name="fade" :key="route.key">
      <component :is="Component" />
    </transition>
  </template>
</router-view>