24 / 28
Как реализовать анимированные переходы между маршрутами?
Оборачиваешь <RouterView> в <Transition> (или <TransitionGroup>). Vue Router v4 использует scoped slot для передачи компонента.
Vue
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>
CSS
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }