Le titre de l'onglet — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 9)

Le titre de l'onglet

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

Énoncé

Écrire une garde afterEach qui donne à l'onglet le titre « Accueil — La Librairie du Campus », « Catalogue — … », « Page introuvable — … » selon la route, à partir d'un champ titre placé dans meta ; pour une fiche, le titre sera « Livre » suivi de l'ISBN.

Corrigé


// Exercice 9.8 : le titre de l'onglet suit la page.
import { createRouter, createMemoryHistory } from "vue-router";
import { routes } from "./routes.js";

const titres = { accueil: "Accueil", catalogue: "Catalogue", introuvable: "Page introuvable" };

export function creerRouteur() {
  const router = createRouter({
    history: createMemoryHistory(),
    routes: routes.map((r) => ({ ...r, meta: { titre: titres[r.name] } })),
  });
  router.afterEach((to) => {
    const titre = to.meta.titre ?? (to.name === "livre" ? `Livre ${to.params.isbn}` : "");
    document.title = `${titre} — La Librairie du Campus`;
  });
  return router;
}

Titres relevés après quatre navigations :


/ → Accueil — La Librairie du Campus
/catalogue → Catalogue — La Librairie du Campus
/livres/9782956300052 → Livre 9782956300052 — La Librairie du Campus
/nulle-part → Page introuvable — La Librairie du Campus