Rutas estáticas

• 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.