Routing en Vue.js. Creando urls dinámicas

Hola a todos! En esta ocasión vamos a adentrarnos en el mundo de Vue.js. En este post hablaremos de cómo preparar el routing en nuestra aplicación de Vue.js.

Como ya sabréis Vue.js es un framework de javascript que está pensado (de manera similar a Angular) para crear SPA -es decir- Single page applications o aplicaciones de una sóla página.

Por ello, para crear nuestras urls internas tendremos que decirle a nuestra aplicación qué componente corresponde a cada url. Para ello utilizaremos routing, mediante un plugin de Vue.js, llamado Vue-Router.

A parte, veremos cómo podemos pasarle alguna variable a este url, para crear diferentes urls dinámicas sin necesidad de crearlas manualmente.

Instalación del routing

Primero, veremos cómo se instala este plugin y cómo se utiliza de una manera sencilla. Tan sólo tenemos que abrir la consola de comandos, colocarnos en la carpeta de nuestro proyecto y allí escribir «npm install vue-router –save». Con esto ya tendremos el routing listo para usar.

Para empezar, tendremos que crear las routes en nuestro proyecto de Vue.

El primer paso es registrar el nuevo plugin dentro de nuestro proyecto. Tenemos que abrir el archivo ‘main.js’, que es el que controla toda nuestra aplicación (en este archivo podremos registrar plugins y componentes de forma global), e importar el plugin mediante:

import vueRouter from 'vue-router'

Vue.use(vueRouter);

La variable «vueRouter» puede ser la que queráis, pero acordaos de utilizar la misma cuando utilizéis Vue.use.

Creando nuestras Routes

El siguiente paso es crear el path con nuestras urls, o lo que es lo mismo: crear las routes. Podemos hacerlos directamente en el archivo ‘main.js’, pero para mantener cierto orden es preferible crear un archivo js que contenga todas nuestras routes y llamarlo luego en el archivo principal.

Ejemplo:

import routes from './nombre-del-archivo-js'

En nuestro archivo routes.js, importamos todos los componentes que vayamos a utilizar como páginas. Simplemente volvemos a utilizar import from… y la ruta donde se hallen nuestros components (en mi caso siempre creo una carpeta llamada ‘components’).

El archivo tendrá un aspecto similar a este:

import blog from './components/blog.vue'
import about from './components/about.vue'

export default [

	{path: '/', component: blog},
	{path: '/about', component: about}
]

Como veis, primeros importamos los componentes que vayamos a usar y luego construimos un objeto que lleva dos propiedades: path y component.

En path, añadiremos ‘/nombre-de-la-ruta’ para decirle a nuestra app en qué ruta estará el componente. (La dejaremos vacía para la home).

En component, escogeremos el componente que queramos enlazar a dicha ruta.

Así de fácil vamos creando las diferentes páginas de nuestra web.

Por último, volvemos al archivo ‘main.js’. Aquí tendremos que crear una nueva instancia del objeto ‘vueRouter’ y decirle dónde se encuentras los paths que hemos creado.

Por último, llamamos a esta instancia en nuestro objeto vue. El código sería similar a este:

import Vue from 'vue'
import App from './App.vue'
import vueRouter from 'vue-router'
import Routes from './routes' 

Vue.use(vueRouter);

const rutas = new vueRouter({
	routes: Routes
})

new Vue({
  el: '#app',
  render: h => h(App),
  router: rutas
})

Mostrando el routing en nuestra app

Ya está todo listo! Pero aún no le hemos dicho a nuestra app dónde queremos que nos muestre las rutas que hemos creado.  Lo único que hay que hacer es llamar al router como si fuese un componente: <router-view></router-view>.

Con esto le estaremos diciendo a vue que nos muestre el componente que tengamos en la ruta actual. Lo que hará la aplicación es cargar el componente sólo en la etiqueta <router-view> sin recargar el resto de la página. ¿No es genial? Así nuestra página cargará mucho más rápido.

Creando nuestro menú

Hacer el menú con Vue Router es lo más sencillo del mundo. Vamos a nuestro nav y, en vez de crear las diferentes <a>, creamos etiquetas <router-link>. Estas etiquetas llevaran un atributo «to» en el que escogemos a donde nos llevará el link.

<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About us</router-link></li>

Con esto crearemos links que se ocuparán de cambiar el contenido de la etiqueta <router-view>, sin recargar el resto de la página.

Además, la aplicación vue-router detecta en que url estamos y si un link lleva a esa url le añade la class active. Así podremos destacar con css ese botón, ¡de una forma casi automática y muy fácil!

Crear urls dinámicas con Routing parameters

Después de haber visto cómo crear nuestras rutas en una app hecha en vue, vamos a estudiar cómo crear diferentes links sin la necesidad de crear uno por uno.

Imaginemos que tenemos un blog, y que cada entrada de nuestro blog tiene un enlace que nos lleva a la noticia completa. ¿Tendríamos que crear un path para cada noticia y un componente por cada una de ellas?

¡Por supuesto que no! Los crearemos de forma dinámica.

Lo que vamos a hacer es una variable que recogeremos de algún sitio y la añadiremos a la url. Así cada noticia tendrá su propia url.

Aquí traigo un ejemplo ultra sencillo. He hecho un array de objetos que contiene cada una de mis noticias:

data () {
  	return {
	  	posts: [

	  		{id:'noticia-1', title: 'Noticia 1', content: 'Lorem ipsum dolor sit amet 1'},
	  		{id:'noticia-2', title: 'Noticia 2', content: 'Lorem ipsum dolor sit amet 2'},
	  		{id:'noticia-3', title: 'Noticia 3', content: 'Lorem ipsum dolor sit amet 3'},
	  		{id:'noticia-4', title: 'Noticia 4', content: 'Lorem ipsum dolor sit amet 4'}

	  	]
  	}
  }

Como veis, cada noticia contiene una propiedad «id» que utilizaré a modo de slug. Esa id será la url de mi noticia. Para pasar esta variable a la url crearé el siguiente código:

<li v-for="post in posts">
	<h2><router-link v-bind:to="'/blog/'+post.id">{{post.title}}</router-link></h2>
</li>

Con la directiva v-for creo un bucle que recorre mi array. Por lo tanto, el título de cada noticia tendrá un <router-link> que me llevará a la url: «blog/+id de la noticia». Por ejemplo, la noticia 1 llevaría a: «blog/noticia-1». Así cada una de ellas.

(Fijaos que para poder utilizar una variable como valor de un atributo, he de utilizar la directiva v-bind en la etiqueta <router-link>).

Con esto ya tenemos nuestra url dinámica.

Pero aún no hemos creado el path correspondiente, por lo que la url no nos llevará a ningún sitio.

Para crear un route con un parámetro utilizamos «/:nombre-del-parámetro. En nuestro caso: «{path: ‘/blog/:id’, component: singleBlog}». Con esto estoy diciéndole a la app que lo que encuentre tras la segunda barra sea tratado como un parámetro llamado «id».

En nuestro ejemplo, la url «blog/lo-que-sea» siempre nos llevará al componente «singleBlog». Con la diferencia que dentro de ese componente podremos recoger el parámetro que estamos pasando via url.

Si escribimos: this.$route.params.id, en el componente, obtendremos «lo-que-sea», puesto que corresponde al parámetro «id».

Gracias a eso, ya podremos diferenciar nuestra noticia de las otras. Recordad que en mi ejemplo tenía un array. Yo podría recorrer ese array y decirle que cuando la id de un objeto me coincida a la que paso por parámetro me imprima la noticia que corresponda. Algo así:

  	for(var x=0; x<this.posts.length; x++){

  		if(this.id == this.posts[x].id){
  			this.index = x;
  		}
  	}

¡Magia! Ahora cuando hago click en el listado de noticias, me llevará a una página: «blog/id-de-la-noticia». Dentro de esa página (que será nuestro componente singleBlog, ya que así lo hemos específicado en nuestro archivo «routes.js»), podremos recoger «id-de-la-noticia», gracias a los parámetros de vue-router: «this.$route.params.id». (Recordad que la palabra clave id la habíamos especificado en el path como «/blog/:id», aunque el parámetro podría tener un nombre a nuestra elección, sólo debemos tener en cuenta que lo que haya tras los dos puntos será el nombre del parámetro).

Con este parámetro que recogemos ya tendremos algo que podremos usar para decirle al programa qué noticia o qué cosa debe buscar y mostrar.

Para esto ya hay mil formas de hacerlo, el ejemplo que os traigo es una de ellas. Dependerá de donde estéis recogiendo la información que queréis mostrar en vuestra página, pero eso lo dejaremos para otro artículo.

Hasta la próxima!