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