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
#avisdanshash. 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 :
:isbnexige au moins un caractère, et il n'existe pas de route/livres. Le paramètrechemincontient les morceaux de l'adresse, dont un dernier morceau vide. - La page introuvable aussi : un paramètre ne contient jamais de barre oblique,
/livres/:isbnn'accepte donc pas un troisième morceau. Une sous-page « avis » demanderait une route enfant.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.