Programación usando VueJS (Vue Router). Parte 7

Vue Router

Una de las ventajas que ofrece VueJS, es que según necesitemos nuevas características este nos permitirá mediante módulos ir ampliando y aumentado su potencia.

Una de esos módulo que ofrece VueJS es el Vue Router, dotando a VueJS de un sistema de rutas en el cliente pudiendo crear SPA (Single Page Aplicactión) conocidas como aplicaciones de una sola página.

Algunas de las características que nos ofrece Vue Router son las siguientes:

  • Permite crear rutas anidadas.
  • Es modular, haciendo que cada ruta sea un componente.
  • Permite crear rutas con parámetros.
  • Permite aplicar transiciones a las rutas.
  • Permite trabajar con el modo historial HTML5

Ahora ya sabemos que es Vue Router, así que procedemos a realizar la instalación y la configuración para nuestro proyecto.

Para instalar este módulo usaremos npm con el siguiente comando: npm i -S vue-router.

Comenzamos con el código

Cuando la instalación termine, abriremos el archivo main.js en nuestro proyecto para realizar la importación y configuración de Vue Router.

main.js

Lo siguiente que debemos hacer es crear un fichero que se llame por ejemplo routes.js, donde definiremos las rutas y asociaremos los componentes (páginas) a esas rutas.

Con la instalación de Vue Router y la definición de nuestras rutas, ahora crearemos una nueva página que, sera la que hemos definido en el fichero routes.js.

Para ello y no extendernos mucho, lo que haremos es copiar el contenido de App.vue y crearemos dentro de components una nueva carpeta llamada pages con un fichero llamado home.vue que contendrá gran parte del código de App.vue.

App.vue

home.vue

En este momento y con el código modificado nuestra aplicación funciona y muestra el contenido aunque no este en App.vue.

Para que esto suceda y se muestre el contenido de esa página deberemos usar el router-view, que no es mas que un componente que forma parte de Vue Router y que nos permite renderizar dentro de un componente, componentes dinámicos en base a una url.

Añadiendo páginas para la navegación

Bien, con lo todo lo anterior ya estamos viendo como funciona el sistema de rutas de VueJS, y acabamos de crear nuestra primera SPA, pero es un ejemplo muy sencillo sin ningún tipo de programación, salvo por la primera carga de home.vue que por defecto le dijimos que para la ruta ‘/‘ use el componente home.vue.

Para probar la navegación, vamos a crear una nueva página que llamaremos contact.vue, y la usaremos para añadir unos datos de contacto.

contact.vue

routes.js (nueva ruta)

Con la página creada y la nueva ruta añadida en nuestro routes.js podemos comprobar si funciona escribiendo en la url lo siguiente: http://localhost:8081/#/contact

Con esta sencilla prueba hemos comprobado como funciona la nueva ruta y se carga el contenido. Esta forma de navegar no es practica así que ahora vamos a ver de que forma podemos realizar esa navegación.

Como navegar usando Vue router

Para realizar la navegación podemos usar html o Javascript.

Primero vamos hacer la forma mas sencilla, que es usando html. 

Dentro del router-view existe un elemento llamado router-link, pues ese elemento sera el que usemos para realizar la navegación

Aprovecharemos el fichero App.vue que tiene el header, y allí añadiremos unos elementos html para realizar la navegación.

App.vue

Ahora que sabemos crear una navegación mediante elementos html, probaremos como realizar la navegación con Javascript.

Lo primero que haremos es crear un componente nuevo llamado showPoster.vue, el cual mostrara solo la portada de la película.

showPoster.vue

También deberemos añadir una nueva ruta a nuestro fichero routes.js

routes.js

Con el código anterior lo único que hemos creado es el componente y la lógica necesaria para mostrar el componente, ahora toca realizar la navegación mediante código.

En el siguiente código veremos que la navegación mediante código es muy simple, usaremos el objeto $router para realizar navegación.

Es importante no confundir con el otro objeto $route, ya que este objeto almacena la información de la ruta, parámetros, etc..

filmCard.vue

History mode de HTML 5

Para terminar esta entrada sobre Vue router, veremos el concepto de history mode de html5. Vue router no usa por defecto el history mode html5, lo que hace es emularlo pero no lo activa.

La forma de activarlo es bastante sencilla, solo tenemos que añadir mode: ‘history’ a la instancia del Vue router dentro del main.js. 

Con esto ya tendrías activado el history mode de html 5 y ademas desaparece la almohadilla (#) de la ruta.

Como el proyecto esta bastante avanzado voy a añadir un enlace al repositorio en github y el enlace a la aplicación funcionando.

Github: https://github.com/kimagure44/curso-Vue-con-proyecto

Aplicación: https://tecnops.es/Ejemplos/CursoVue/