Rutas con transiciones
- De igual forma que disponemos del componente
transition
en Vue, con Vue Router también podemos aplicar transiciones entre los cambios de ruta en nuestra aplicación. - Estas funcionan de igual forma que las que se usan en Vue.
- Ya que las rutas se muestran en el componente
router-view
, podemos envolverlo con el componentetransition
y establecer sus atributos, como por ejemploname
.
<transition name="fade">
<router-view />
</transition>
- Y ahora crear las clases CSS para un desvanecimiento entre cada ruta.
.fade-enter-active,
.fade-leave-active {
opacity: 1;
transition: all 0.5s ease-in-out;
}
.fade-enter,
.fade-leave {
opacity: 0;
}
- Puedes hacer mucho más con las transiciones, te recomiendo que le eches un vistazo a la documentación oficial de Vue. Por ejemplo podemos crear transiciones diferentes para la entrada y la para salida.
.fade-enter-active {
animation: fade 0.2s ease-in-out;
}
@keyframes fade {
from {
opacity: 0;
}
50% {
opacity: 50%;
}
to {
opacity: 1;
}
}
.fade-leave-active {
animation: slide 0.2s ease-in-out;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-300px);
}
}
- Y establecer el atributo
mode
en el componentetransition
, para que esta la transición (que es diferente para la salida y para la entrada) funcione correctamente. - Como ves estas son transiciones globales, pero como se muestra en la documentación también se pueden añadir transiciones por ruta, estableciéndolas en cada componente o incluso transiciones dinámicas, es decir, diferentes por cada ruta/componente.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?
Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.