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.
Gracias, fue útil el artículo
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.