Une page À propos — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 9)

Une page À propos

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

Énoncé

Ajouter à la Librairie une page /a-propos (composant PageAPropos.vue, titre d'onglet « À propos »), chargée à la demande, et un lien vers elle dans le pied de page. Où placer la route dans la table ? Quel élément de la page doit pouvoir recevoir le focus ?

Corrigé


<template>
  <section aria-labelledby="titre-a-propos">
    <h1
      id="titre-a-propos"
      tabindex="-1"
    >
      À propos
    </h1>
    <p>La Librairie du Campus accueille les étudiants du Quartier latin depuis 1987.</p>
  </section>
</template>


// À ajouter dans la table des routes de la Librairie, AVANT la route introuvable :
export const routeAPropos = {
  path: "/a-propos",
  name: "a-propos",
  component: () => import("./PageAPropos.vue"),
  meta: { titre: "À propos" },
};

La route se place n'importe où avant la route introuvable (par lisibilité ; le routeur la classerait de toute façon devant le motif attrape-tout). Dans le pied de page : <RouterLink :to="{ name: 'a-propos' }">À propos</RouterLink>. Le <h1> porte tabindex="-1" pour recevoir le focus de la garde afterEach. Le test vérifie que l'adresse mène bien à la page :


/a-propos → a-propos | À propos