Parámetros en URL de Vue Router

Hace algunos días mostré cómo instalar el router de Vue.

Hoy vamos a ver una cosa muy simple: cómo pasar parámetros en el router, para que los mismos se vean en la URL y podamos pasar datos entre componentes a través de la URL.

Vue Router params

El ejemplo que veremos responderá a una URL como la siguiente:

#/alumnos/editar/1

En donde el 1 es el id del alumno y puede cambiar.

Comenzamos definiendo la ruta:

Fíjate en que definimos el id con dos puntos, es decir, :id

Con los dos puntos indicamos que ese será una variable de la URL. Ahora, para navegar a esa ruta usamos this.$router.push:

La variable idAlumno tendrá el id de alumno.

Nota: para navegar usa this.router.push y para recibir, this.route.params. Mira la diferencia entre router y route.

Finalmente, para recuperar ese id en el otro componente lo hacemos a través de this.$route.params:

La variable this.$route.params es un diccionario con todos los parámetros, en este caso solo pasamos un valor pero podríamos pasar más.

Parámetros en URL de Vue Router

Por parzibyte Tiempo de lectura: 1 min
0