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:

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.