Validar Props con Vuejs 2
Validar Props con Vuejs 2
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


De una forma muy sencilla y sin la necesidad de instalar ninguna dependencia externa es posible crear rutas en Vue.js 2, pero únicamente nos pueden servir cuando creemos una aplicación de tipo SPA, de otra forma tendremos que utilizar algo más robusto.

Nosotros vamos a utilizar Vue-Router, que es el router oficial de Vue.js y es muy sencillo de utilizar. Lo que vamos a ver en este tutorial va a ser cómo instalar y configurar Vue-Router, crear rutas sencillas, rutas con parámetros y rutas con rutas hijas, algo muy necesario en muchas ocasiones.

El resultado final de nuestra app será el siguiente.


Rutas en Vue.js 2 con Vue-Router

Lo primero que vamos a hacer es instalar Vue-Router, así que abre una terminal y ejecuta el siguiente comando.

Ahora que tenemos instalado el router de Vue.js, vamos a crear algunos componentes, si tienes dudas con el siguiente código te recomiendo los siguientes tutoriales.

Lo interesante de los componentes anteriores es ver cómo tenemos acceso al router con $route directamente desde la template, con $route.params tenemos acceso a los parámetros que maneja la ruta actual.

Un poco más abajo, en el componente Admin vemos que hacemos uso de la etiqueta html router-view, de esta forma podremos cargar rutas hijas en nuestro componente Admin, para nuestro caso cargaremos el componente AdminUser.vue.

Ahora vamos a definir las rutas de nuestra aplicación para poder exportarlas al bootstrap de nuestra aplicación.

Lo único que debemos definir es un array de objetos con cada una de las rutas que necesitemos, cada una de ellas necesitas por lo menos el path y el componente que la representa, y cómo puedes ver, con children podemos definir rutas hijas.

Para poder utilizar nuestro sistema de rutas sólo nos quedan por hacer 2 cosas, configurar el router en el archivo main.js y definir la template en el archivo App.vue, primero vamos a abrir el archivo main.js y añadimos lo siguiente.

Finalmente sólo nos queda abrir nuestro archivo App.vue y modificar el código por el siguiente.

Con router-link podemos definir los enlaces de nuestras rutas y dentro de router-view será donde cargarán todos los componentes de nuestra aplicación, es así de plano, estoy seguro que si has trabajado con algún framework como Angular 2 todo esto te tiene que sonar bastante.