Adloun

Vue : construire une application web (école d'ingénieur) · Chapitre 9 · Application directe du cours

Lire une route

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

Énoncé

La Librairie a les routes suivantes :


export const routes = [
  { path: "/", name: "accueil", component: page("PageAccueil") },
  { path: "/catalogue", name: "catalogue", component: page("PageCatalogue") },
  { path: "/livres/:isbn", name: "livre", component: page("PageLivre"), props: true },
  { path: "/:chemin(.*)*", name: "introuvable", component: page("PageIntrouvable") },
];

Pour chacune des adresses suivantes, donner le nom de la route choisie, et le contenu de params, query et hash :

  • /livres/9782956300052?tri=prix#avis
  • /catalogue?q=java&rayon=Informatique
  • /livres/
  • /livres/9782956300052/avis

Corrigé

On demande au routeur lui-même, avec router.resolve, qui calcule la route d'une adresse sans naviguer :


const router = createRouter({ history: createMemoryHistory(), routes });
const lire = (adresse) => {
  const r = router.resolve(adresse);
  return { name: r.name, params: r.params, query: r.query, hash: r.hash };
};

/livres/9782956300052?tri=prix#avis → {
  name: 'livre',
  params: { isbn: '9782956300052' },
  query: { tri: 'prix' },
  hash: '#avis'
}
/catalogue?q=java&rayon=Informatique → {
  name: 'catalogue',
  params: {},
  query: { q: 'java', rayon: 'Informatique' },
  hash: ''
}
/livres/ → {
  name: 'introuvable',
  params: { chemin: [ 'livres', '' ] },
  query: {},
  hash: ''
}
/livres/9782956300052/avis → {
  name: 'introuvable',
  params: { chemin: [ 'livres', '9782956300052', 'avis' ] },
  query: {},
  hash: ''
}
  • La fiche : le paramètre est l'ISBN ; le tri est dans la requête, le fragment #avis dans hash. Requête et fragment n'interviennent pas dans le choix de la route.
  • Le catalogue, sans paramètre ; la requête contient les deux réglages, en chaînes.
  • La page introuvable : :isbn exige au moins un caractère, et il n'existe pas de route /livres. Le paramètre chemin contient les morceaux de l'adresse, dont un dernier morceau vide.
  • La page introuvable aussi : un paramètre ne contient jamais de barre oblique, /livres/:isbn n'accepte donc pas un troisième morceau. Une sous-page « avis » demanderait une route enfant.

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 →