Анимация переходов

Смотрите бесплатные видео-уроки на Vue School

Для того чтобы использовать transitions в компонентах маршрута и анимировать навигацию, необходимо использовать слот <RouterView>:

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

Всё transition API применимо и здесь.

Анимация перехода для конкретных маршрутов

В приведенном выше случае для всех маршрутов будет применяться один и тот же переход анимации. Если необходимо, чтобы каждый компонент маршрута имел разные переходы, можно вместо этого использовать сочетание meta полей и динамического входного параметраname на компоненте <transition>:

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]

<router-view v-slot="{ Component, route }">
  <!-- Используйте пользовательский переход анимации или `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>

Динамическая анимация для маршрутов

Вы можете динамически определять используемый переход анимации, основываясь на связи между целевым и текущим маршрутами. Для этого используется фрагмент, очень похожий на предыдущий:

<!-- использование динамического имени перехода -->
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition">
    <component :is="Component" />
  </transition>
</router-view>

Мы можем добавить хуки завершения перехода для динамического добавления информации в meta поле в зависимости от глубины маршрута

router.afterEach((to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})

Принудительная анимация перехода между повторно используемыми представлениями

Vue может автоматически повторно использовать компоненты, когда это возможно, избегая каких-либо переходов анимации. К счастью, есть возможность добавить атрибут key для принудительного перехода анимации. Это также позволяет вызывать переходы, оставаясь на том же маршруте с разными параметрами:

<router-view v-slot="{ Component, route }">
  <transition name="fade">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>