Переходы

Для использования переходов на компонентах маршрутов и анимации навигации, вам необходимо использовать API v-slot:

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

Все API переходов работают одинаково в данном случае.

Переход на уровне маршрута

Вышеприведенное использование будет применять один и тот же переход для всех маршрутов. Если вы хотите, чтобы каждый компонент маршрута имел разные переходы, вы можете вместо этого объединить мета-поля и динамический 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 }">
  <!-- Use any custom transition and fallback to `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>

Динамический переход на основе маршрута

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

<!-- use a dynamic transition name -->
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transitionName">
    <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.transitionName = 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>