Curso Vue Router esencial: aprende a enrutar con Vue

Rutas dinámicas con Vue Router

  • En la documentación oficial de Vue Router, apartado rutas dinámicas se menciona un escenario parecido al nuestro. En nuestro caso no son ID's, sino username's, pero a parte de esta diferencia se trata del mismo mecanismo: debemos usar segmentos de ruta dinámicos para cargar el usuario correcto.
  • En Vue Router estos segmendos dinámicos se expresan con los dos puntos :. Indican que no se trata de una string sino de una referencia que se evaluará en cada caso desde el componente que esté escuchando en esa ruta.
  • Cuando encontramos una coincidencia, su valor se inyecta con el mismo identificador en la propiedad params del objeto $route que tenemos acceso desde cada componente de nuestra App (inyectamos esa dependencia en nuestra instancia principal). En nuestro caso sería accesible así $route.params.usename.
  • Por ejemplo, para el componente AppUser podemos definir en router/index.js.
import AppUser from "../components/AppUser";
...
{
  path: "/user/:username", // <- Segmento dinámico
  name: "User",
  component: AppUser
}
  • Ahora debemos acutalizar el componente AppUserList para crear enlaces a través de RouterLink (más adelante lo haremos de forma programática).
<RouterLink :to="`user/${user.login.username}`">
  ...
</RouterLink>
  • Ahora, en AppUser, podemos usar el objeto $route para capturar el valor del segmento de URL dinámico username y mostrarlo en el template del componente.
  • Sin embargo, nos encontramos con el problema de que ahora, al no recibir la información vía propiedades no tenemos al resto de información que mostrábamos del usuario a través de la propiedad computada userData.
  • Una solución sería acceder al AppUserList que es el componente que tiene la información de todos los usuarios a través de $refs, pero esto, además de no ser muy fiable hace que los componentes se acoplen y se establezcan relaciones para funcionar, algo que luego puede volverse en tu contra.
  • Tampoco podemos utilizar custom events ya que la relación de AppUserList y AppUser no es de padre/hijo. Por otro lado no quiero utilizar un simple Event Bus.
  • Lo que vamos a hacer es, en la próxima lección utilizar otra pieza del ecosistema Vue para almacenar y gestionar el estado (nuestro usuarios) desde cualquier lugar de la aplicación.
  • Me estoy refiriendo a Vuex.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue