Vue.js 2 #8 : Crear rutas con vue-router y aplicar una transición al cambiar de ruta

Los mismos creadores de Vue.js han creado un plugin para Vue.js que nos permite añadir rutas a nuestra aplicación. En esta entrada añadiremos esta librería llamada vue-router y crearemos un ejemplo sencillo dándole estilo con la librería llamada Vuetify, que nos permite añadir estilos Material Design. También le añadiremos una transición fade cuando se cambie de ruta, es decir, el contenido de la ruta se mostrará gradualmente según el tiempo que pongamos.

Empezamos añadiendo las librerías JS necesarias:

Y también añadimos las librerías CSS:

Una vez ya tenemos las librerías necesarias incrustadas, vamos a crear el JS con la instancia de Vue.js y vamos a indicarle a Vue que vamos a utilizar los plugins vue-routerVuetify ( Vue.use() ):

Como ya le hemos indicado a Vue.js que vamos a utilizar las librerías vue-routerVuetify, creamos el HTML, ya que vamos a utilizar cosas de estas librerías:

Si te fijas estamos utilizando los componentes que nos provee la librería Vuetify, puedes ver su documentación aquí e investigar sobre todos los componentes que posee. Nosotros utilizaremos simplemente un toolbar, que viene a ser un menú de navegación arriba del todo de la página con unos links que apuntan a unas rutas que crearemos ahora con vue-router.

 

Vale, ya tenemos la base creada con un diseño mínimo, ahora vamos a crear las rutas:

Primero creamos unos componentes mínimos con un mensaje para que se muestre en la ruta, después creamos una instancia de vue-router con las rutas y añadimos la variable router a la instancia de Vue.

Yo he creado 4 rutas (la última de ellas para el error 404), pero se pueden crear las que quieras. Si te fijas en el HTML hay un enlace a una ruta llamada test, como puedes ver, esta ruta no existe, por tanto, se mostrará un error 404 (la ruta *). Para crear una ruta, en el array routes creamos un objeto indicando la ruta (path), el nombre de la ruta (name) que nos permitirá acceder a la ruta más fácilmente más tarde e indicamos el componente (component) correspondiente a la ruta.

Vue-router es una librería muy completa con muchas opciones que puedes investigar en su documentación, en otra entrada ya trataremos más en profundidad esta librería.

Ahora lo que se ve sería ésto (aún no hemos aplicado la transición al cambiar de ruta):

 

Ahora vamos a añadir la transición al cambiar de ruta, simplemente tenemos que añadir estas dos líneas en el HTML:

Y ahora tenemos que añadir el CSS que será el que hará la transición, la animación en sí, ya que el tag <transition> añade unas clases CSS según el name que pongamos (aquí puedes encontrar más información):

Este código CSS lo he sacado de un buen post de StackOverflow.

See the Pen Vue.js 2 #8 vue-router and Vuetify.js by vreaxe (@vreaxe) on CodePen.

 

-

– https://vuetifyjs.com/vuetify/quick-start

– https://router.vuejs.org/en/

– https://stackoverflow.com/a/41221100

– https://vuejs.org/v2/guide/transitions.html


Aloja tu proyecto en DigitalOcean: Obtén $200 de crédito gratis al registrarte a través de este enlace.

Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.

? CONTACTAR

Deja una respuesta

  Acepto la política de privacidad