Parámetros en URL de Vue Router

3 comentarios / javascript, VueJS, web / Por

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:

export default new Router({
    routes: [
        {
            path: '/alumnos/editar/:id',
            name: 'EditarAlumno',
            component: EditarAlumno,
        },
    ]
});

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:

this.$router.push({
  name: "EditarAlumno",
  params:{
    id: idAlumno,
  }
});

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:

let idAlumno = this.$route.params.id;

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.

3 comentarios en “Parámetros en URL de Vue Router”

  2. kevin

    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?

    Responder
  3. ivan de jesus

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

    Responder

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *