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:

https://unpkg.com/vue

https://unpkg.com/vue-router/dist/vue-router.js

https://unpkg.com/vuetify/dist/vuetify.min.js

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

1	https://unpkg.com/vuetify/dist/vuetify.min.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-router y Vuetify ( Vue.use() ):

Vue.use(Vuetify);

Vue.use(VueRouter);

new Vue({

el: '#app'

});

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

<v-toolbar>

<v-toolbar-title>Groloop</v-toolbar-title>

<v-spacer></v-spacer>

<v-toolbar-items>

<v-btn flat href="#/">Home</v-btn>

<v-btn flat href='#/about-us'>About us</v-btn>

<v-btn flat href='#/contact'>Contact</v-btn>

<v-btn flat href='#/test'>Test</v-btn>

</v-toolbar-items>

</v-toolbar>

<router-view></router-view>

</div>

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:

...

// componentes

var Home = {

}

var AboutUs = {

}

var Contact = {

}

var NotFound = {

}

// indicamos las rutas con el componente correspondiente

var router = new VueRouter({

history: false,

routes: [

{ path: '/', name: 'home', component: Home },

{ path: '/about-us', name: 'about-us', component: AboutUs },

{ path: '/contact', name: 'contact', component: Contact },

{ path: '*', name: 'not-found', component: NotFound }

});

// añadimos router a la instancia de Vue

new Vue({

el: '#app',

router: router

});

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:

...

<router-view></router-view>

</transition>

...

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):