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

Imprimir PDF con Bot de Telegram

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

4 horas 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…

20 horas hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

21 horas hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

2 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

1 semana hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

1 semana hace

Esta web usa cookies.