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.

  • El componente RouterLink añade una clase CSS cuando se encuentra en una ruta activa. Algo idea para señalar e identificar visualmente en qué parte de la aplicación nos encontramos.
  • Si examinamos los elementos a que componen la cabecera verás que se les añade la clase router-link-exact-active cuando nos encontramos en esa ruta.
  • Si en nuestro componente AppHeader creamos una regla CSS para añadirle un color diferente, debería funcionar sin más.
nav a.router-link-exact-active {
  color: goldenrod;
  border-bottom: 1px solid;
}
  • Si quieres usar tu propio nombre de clase no tienes más que (como indica en la documentación) utilizar la propiedad linkExactActiveClass en el constructor de Vue Router y actualizar tu selector CSS.
const router = new VueRouter({
  ...
  linkExactActiveClass: "escuela-vue-exact",
  ...
});
  • Pero, ¿cómo conseguir que cuando estemos utilizando la sub-ruta Info también tengamos iluminado un punto del menú?. Si te fijas ahora mismo no hay correspondencia. Pasamos de hacer click desde la ruta Home hasta Info.
  • Podemos cambiar el path de la ruta original a /user y así la asociamos con el resto.
const routes = [
  {
    path: "/user",
    name: "Home",
    ...
  },
  ...
]
  • De esta forma podemos utilizar la clase active-class que tienen los enlaces activos. También podemos cambiarla con la propiedad linkActiveClass.
const router = new VueRouter({
  ...
  linkExactActiveClass: "escuela-vue-exact",
  linkActiveClass: "escuela-vue-active",
  ...
});
  • Y actualizar nuestro código CSS acorde.
nav a.escuela-vue-exact,
nav a.escuela-vue-active {
  color: goldenrod;
  border-bottom: 1px solid;
}
  • Sin embargo al acceder a la raíz / no encontramos nada, obviamente. Para solucionarlo, en la siguiente lección crearemos una redirección de forma sencilla.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue