Le lien Catalogue sur la fiche — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 9)

Le lien Catalogue sur la fiche

Le routeur : plusieurs écrans, une seule page · niveau 1 (application)

Énoncé

Dans la Librairie, le menu contient un lien « Catalogue » vers /catalogue. Sur la fiche d'un livre (/livres/:isbn), ce lien n'est pas marqué comme actif.

Expliquer pourquoi.
Écrire un composant de menu, MenuPrincipal.vue, dont le lien « Catalogue » reçoit une classe CSS lien-courant sur le catalogue et sur toutes les fiches, sans modifier les routes.

Corrigé

Le routeur marque un lien actif quand sa route est la route courante ou l'un de ses ancêtres dans la table. Les routes /catalogue et /livres/:isbn sont sœurs : la ressemblance des adresses ne compte pas.
On calcule soi-même l'état « courant », à partir du nom de la route :


<script setup>
import { computed } from "vue";
import { RouterLink, useRoute } from "vue-router";

const route = useRoute();
// Le lien « Catalogue » reste marqué sur la fiche d'un livre.
const dansCatalogue = computed(() =>
  route.name === "catalogue" || route.name === "livre",
);
</script>

<template>
  <nav aria-label="Navigation principale">
    <RouterLink to="/">
      Accueil
    </RouterLink>
    <RouterLink
      to="/catalogue"
      :class="{ 'lien-courant': dansCatalogue }"
    >
      Catalogue
    </RouterLink>
  </nav>
</template>

Classes du lien « Catalogue », relevées par le test :


sur /catalogue : [ 'router-link-active', 'router-link-exact-active', 'lien-courant' ]
sur la fiche   : [ 'lien-courant' ]

Sur le catalogue, les classes du routeur s'ajoutent à la nôtre ; sur la fiche, seule la nôtre est présente. Pour qu'un lecteur d'écran l'annonce aussi, on pourrait lier de la même façon aria-current. L'autre solution, plus structurelle, serait de déclarer la fiche comme route enfant du catalogue.