Vue : construire une application web (école d'ingénieur) · Chapitre 9 · Exercice de TD

Les anciennes adresses

Le routeur : plusieurs écrans, une seule page · niveau 2

Énoncé

Le site du livre JavaScript avait quatre pages, vers lesquelles des liens circulent encore :

index.html ;
catalogue.html?tri=… ;
livre.html?isbn=… ;
commande.html.

Écrire les redirections qui les envoient vers les pages de l'application, en conservant la requête du catalogue, et en faisant de l'ISBN de livre.html le paramètre de la fiche. Que se passe-t-il si livre.html est demandée sans ISBN ?

Corrigé


// Exercice 9.9 : les adresses de l'ancien site (livre JavaScript) restent valables.
export const redirections = [
  { path: "/index.html", redirect: "/" },
  { path: "/catalogue.html", redirect: (to) => ({ path: "/catalogue", query: to.query }) },
  {
    path: "/livre.html",
    redirect: (to) =>
      to.query.isbn
        // query: {} : sans lui, le routeur recopierait ?isbn=… dans la nouvelle adresse.
        ? { name: "livre", params: { isbn: to.query.isbn }, query: {} }
        : { path: "/catalogue" },
  },
  { path: "/commande.html", redirect: "/panier" },
];

Les redirections se placent avant la route introuvable. Résultat :


/index.html → /
/catalogue.html?tri=prix → /catalogue?tri=prix
/livre.html?isbn=9782956300069 → /livres/9782956300069
/livre.html → /catalogue
/commande.html → /panier

Une redirection conserve la requête de l'adresse d'origine quand la destination n'en précise pas : sans query: {}, la troisième ligne aurait été


/livre.html?isbn=9782956300069 → /livres/9782956300069?isbn=9782956300069

Sans ISBN, livre.html n'a pas de livre à montrer : on renvoie au catalogue plutôt que vers une fiche impossible.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →