Transiciones

Mira una lección de video gratuita en Vue School

Para usar transiciones en las rutas de tus componentes y navegaciones animadas, necesitas usar el slot <RouterView>:

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

Todas las APIs de transición funcionan igual aquí.

Transición por Ruta

El uso anterior aplicará la misma transición para todas las rutas. Si quieres que cada componente de la ruta tenga diferentes transiciones, puedes combinar metacampos y un nombre dinámico en el <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 }">
  <!-- Usar una transición personalizada o fallback a `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>

Transición Dinámica Basada en Rutas

También es posible determinar la transición a utilizar dinámicamente basándose en la relación entre la ruta de destino y la ruta actual. Usando un snippet muy similar al anterior:

<!-- usar un nombre de transición dinámico -->
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition">
    <component :is="Component" />
  </transition>
</router-view>

Podemos añadir un hook posterior a la navegación para añadir dinámicamente información al metacampo basándonos en la profundidad de la ruta.

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'
})

Forzar una transición entre vistas reutilizadas

Vue podría reutilizar automáticamente componentes que se parecen, evitando cualquier transición. Afortunadamente, es posible añadir un atributo key para forzar transiciones. Esto también permite disparar transiciones permaneciendo en la misma ruta con diferentes parámetros:

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