• Vamos a hablar de otra forma de expresar el acceso a rutas. Más conveniente y sencillo de mantener.
  • Si te fijas, cuando utilizamos el componente RouterLink hacemos uso de la propiedad path de cada ruta establecida en la constate routes de router/index.js.
  • Aunque esto es perfectamente válido, imagina que en todo el proyecto tienes varias referencias al path de esa ruta, ¿que ocurre si un día decides cambiarla?. Obviamente no seróa el fin del mundo y con buscar y reemplazar puedes solucionarlo en unos minutos pero ahora piensa en que no es una ruta, sino varias. O quizás estas componiendo el path de forma dinámica en alguna parte...
  • Es mucho más sencillo usar la propiedad name que hemos establecido en cada ruta, porque aunque el path de la ruta cambie, podemos mantener el mismo identificador y referirnos a él.
  • Vamos a realizar los cambios en los componentes necesarios. Primero en AppHeader.
<nav>
  <RouterLink :to="{ name: 'Home' }">Directory</RouterLinkk>
  <RouterLink :to="{ name: 'Contact' }">Contact</RouterLink>
  <RouterLink :to="{ name: 'Legal' }">Legal</RouterLink>
</nav>
  • Luego en AppUser.
<RouterLink class="user__more"
   :to="{
      name: 'Info',
      params: { username: this.username }
    }"
>Show user info 👁</RouterLink>
  • Y por último en AppUserList.
<RouterLink :to="{ name: 'User', params: { username: user.login.username } }">
...
</RouterLink>
  • El proyecto sigue funcionando correctamente pero ahora tienes una mayor seguridad a la hora de cambiar aspectos de las rutas y sus parámetros, porque te estás refiriendo a ellas a través de su nombre.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Vue Router en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?

Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬