Clase CSS activa

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