Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Continuando con la última lección vemos que los enlaces el menú principal no funciona. Obviamente no hemos establecido las rutas, esos pares de path:component que se encuentran en router/index.js. Vamos a completarlo.
import AppLegal from "../views/AppLegal";
import AppContact from "../views/AppContact";
...
{
  path: "/legal",
  name: "Legal",
  component: AppLegal
},
{
  path: "/contact",
  name: "Contact",
  component: AppContact
}
  • Esto es lo que llamamos rutas estáticas, es decir, un mapeo de un path sin ningún tipo de segmento dinámico o atributo que pueda cambiar, hacia un component que se carga cuando se visita el path. Es la manera más directa y sencilla de enrutar y en cualquier proyecto siempre tendrás este tipo de rutas para secciones estáticas.
  • Ahora tenemos que hacer uso de RouterLink en nuestro componenten AppHeader.vue. De esta forma conseguiremos que los enlaces funcionen.
  • Como ves RouterLink dispone de varias opciones y propiedades para configurarlo a tu gusto. En nuestro caso vamos autilizar el atributo to que indica el destino o path de la ruta a la que queremos desplazarnos.
<router-link to="/">Directory</router-link>
<router-link to="contact">Contact</router-link>
<router-link to="/legal">Legal</router-link>
  • Con las rutas especificadas en nuestro router/index.js y el componente RouterLink configurado, al hacer click en los enlaces verás que el contenido correspondiente se carga en el componente RouterView de App.vue.
  • La pregunta ahora es cómo gestionar la información de cada usuario, que es dinámica, con Vue Router. Eso es lo que haremos en la próxima lección.
Descarga la chuleta de Vue 3 gratis

Descarga la chuleta de Vue 3

Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️

DESCARGA GRATIS LA CHULETA AHORA 💾

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue