Vérifier l'ISBN

// Exercice 9.7 : n'afficher la fiche qu'avec un ISBN de 13 chiffres.
import { createRouter, createMemoryHistory } from "vue-router";
import { routes } from "./routes.js";

function verifierIsbn(to) {
  if (to.name !== "livre" || /^\d{13}$/.test(to.params.isbn)) return true;
  // On garde l'adresse tapée : la page introuvable l'affichera.
  return {
    name: "introuvable",
    params: { chemin: to.path.slice(1).split("/") },
    query: to.query,
    hash: to.hash,
  };
}

// Première idée : une garde de route (beforeEnter).
export function routeurAvecBeforeEnter() {
  return createRouter({
    history: createMemoryHistory(),
    routes: routes.map((r) => (r.name === "livre" ? { ...r, beforeEnter: verifierIsbn } : r)),
  });
}

// Solution : une garde globale, appelée à CHAQUE navigation.
export function routeurAvecBeforeEach() {
  const router = createRouter({ history: createMemoryHistory(), routes });
  router.beforeEach(verifierIsbn);
  return router;
}

Le test fait le même parcours avec les deux routeurs :

beforeEnter : [
  '/livres/abc → introuvable',
  '/livres/9782956300052 → livre',
  '/livres/978-2-95?x=1 → livre'
]
beforeEach  : [
  '/livres/abc → introuvable',
  '/livres/9782956300052 → livre',
  '/livres/978-2-95?x=1 → introuvable'
]

• La garde renvoie true ou une redirection vers la page introuvable, à laquelle on passe les morceaux de l'adresse tapée, la requête et le fragment : l'adresse affichée ne change pas.
• Avec beforeEnter, la troisième adresse arrive sur la fiche : on venait déjà de la fiche du Petit Prince, et la garde de route n'est appelée qu'en entrant dans la route, pas quand seul le paramètre change. La garde globale beforeEach, appelée à chaque navigation, corrige le problème. On aurait aussi pu ajouter, dans la fiche, onBeforeRouteUpdate(verifierIsbn).