VueJS

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:

See the gist on github.

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:

See the gist on github.

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:

See the gist on github.

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • Hola! Estoy trabajando en un proyecto con Vue y aplico lo que explicas, pero cuando recargo la página salen varias veces el error "Unexpected token '<'", sucede lo mismo usando una etiqueta router-link y cuando decido cambiar el valor de :id en la URL. Revisando noté que ese error surje solamente cuando se trata de pasar parámetros por una url con más de un slash como tu ejemplo o "ejemplo/productos/editar/:id" más no cuando es solamente "ejemplo/:id". ¿Hay alguna manera de solucionarlo?

  • genial directo al grano,muchas gracias estuve revisando varios videos y post y esta esta totalmente explicado y simplificado,eres genial,gracias amigo.

Entradas recientes

Solución: Unable to extract uploader id con youtube-dl

En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…

1 día hace

Enviar foto a Telegram usando cURL y Bot

Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…

1 día hace

cURL y Telegram: enviar mensaje a Bot

En un post previo te enseñé a enviar un mensaje en nombre de un Bot…

1 día hace

Impresora térmica con Telegram usando Bot

En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…

1 día hace

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

5 días hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

6 días hace

Esta web usa cookies.