Le routeur : plusieurs écrans, une seule page

Au chapitre précédent, la Librairie du Campus est devenue une vraie application : son catalogue vient du serveur, son panier se souvient de son contenu. Mais elle n'a qu'un seul écran. Le site du livre JavaScript, lui, avait plusieurs pages : l'accueil, le catalogue, la fiche d'un livre, le panier. Chaque page avait son adresse, que l'on pouvait mettre en favori, envoyer à un ami, ou retrouver avec le bouton Retour du navigateur.

Une application Vue peut offrir la même chose sans jamais recharger la page : c'est le rôle du routeur. Il associe chaque adresse à un composant, affiche le bon composant quand l'adresse change, et change l'adresse quand on clique sur un lien, sans demander de nouvelle page au serveur. Ce chapitre présente Vue Router, la bibliothèque officielle : routes, liens, paramètres, requête, page introuvable, gardes de navigation et chargement différé. À la fin, la Librairie aura une adresse par écran, et la fiche de chaque livre sera accessible directement par son ISBN.

Le chapitre utilise Vue Router 5.3.1. Les rendus montrés ont été produits en construisant chaque exemple avec Vite, puis en le pilotant dans Chromium avec l'outil Playwright ; les sorties marquées « test » viennent de Vitest, l'outil de test présenté au chapitre 11.

9.1 Une application à page unique

Sur un site classique, chaque clic sur un lien est une requête au serveur : le navigateur jette la page courante, télécharge la nouvelle, la construit, exécute à nouveau ses scripts. Tout l'état de la page précédente est perdu, sauf ce qu'on a pris soin de ranger dans localStorage.

Le livre JavaScript a déjà montré l'outil qui rend cela possible : l'API History du navigateur. La méthode history.pushState change l'adresse et ajoute une entrée à l'historique sans rien charger ; l'événement popstate signale que l'utilisateur a utilisé les boutons Précédent ou Suivant. Un routeur n'est qu'une couche au-dessus de cette API :

• il tient une table des routes : à tel motif d'adresse, tel composant ;
• au démarrage, il lit l'adresse courante et choisit la route qui lui correspond ;
• quand on clique sur un de ses liens, il empêche le navigateur de charger une nouvelle page, appelle pushState et affiche le nouveau composant ;
• quand on revient en arrière, il réagit à popstate de la même façon.

On garde ainsi ce que les utilisateurs attendent du Web (une adresse par écran, le bouton Retour, les favoris, le partage d'un lien) tout en conservant l'état de l'application d'un écran à l'autre : le panier n'a pas besoin d'être relu, le catalogue déjà chargé reste en mémoire.

9.2 Premières routes

Avant la Librairie, une démonstration réduite au minimum : trois pages (accueil, liste de livres, fiche d'un livre) et une page introuvable. Le projet est dans code/ch9/demo-routeur/. On ajoute Vue Router aux dépendances :

$ npm install vue-router@5.3.1

9.2.1 La table des routes

Le routeur se crée dans un module à part, src/router.js :

import { createRouter, createWebHistory } from "vue-router";
import PageAccueil from "./pages/PageAccueil.vue";
import PageLivres from "./pages/PageLivres.vue";
import PageLivre from "./pages/PageLivre.vue";
import PageIntrouvable from "./pages/PageIntrouvable.vue";

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", name: "accueil", component: PageAccueil },
    { path: "/livres", name: "livres", component: PageLivres },
    { path: "/livres/:isbn", name: "livre", component: PageLivre, props: true },
    { path: "/:chemin(.*)*", name: "introuvable", component: PageIntrouvable },
  ],
});

Trois choix sont faits ici :

• createWebHistory() demande des adresses « normales » (/livres/9782956300052), gérées par l'API History ; la section 9.9 présente l'autre mode et ce que celui-ci exige du serveur ;
• :isbn est un paramètre : ce morceau de l'adresse est variable, et le routeur le met de côté ;
• la dernière route attrape toutes les adresses qu'aucune autre n'a reconnues ; elle doit rester la dernière, on y revient plus loin.

On installe le routeur dans l'application comme un plugin, avec use, avant le montage :

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router.js";

createApp(App).use(router).mount("#app");

9.2.2 Les liens et la vue du routeur

Le composant racine ne contient plus de page : il contient le menu, et un emplacement où le routeur affichera la page courante.

<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <header>
    <nav aria-label="Navigation principale">
      <RouterLink to="/">Accueil</RouterLink>
      <RouterLink to="/livres">Livres</RouterLink>
    </nav>
  </header>
  <main>
    <RouterView />
  </main>
</template>

<style>
body { font-family: system-ui, sans-serif; margin: 1rem; }
nav { display: flex; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #ccc; }
.router-link-active { font-weight: bold; }
.router-link-exact-active { text-decoration: none; }
</style>

La page de la liste construit ses liens à partir des données :

<script setup>
import { RouterLink } from "vue-router";
import { livres } from "../livres.js";
</script>

<template>
  <h1>Nos livres</h1>
  <ul>
    <li v-for="livre in livres" :key="livre.isbn">
      <RouterLink :to="`/livres/${livre.isbn}`">{{ livre.titre }}</RouterLink>
    </li>
  </ul>
</template>

Construite avec vite build et ouverte à l'adresse /livres, la démonstration affiche ceci (le lien du menu correspondant à la page courante est en gras) :

Voici le HTML que <RouterLink> a produit pour les deux liens du menu, relevé dans Chromium :

<a href="/" class="">Accueil</a>
<a href="/livres" class="router-link-active router-link-exact-active" aria-current="page">Livres</a>

Ce sont de vrais liens, avec un vrai href : on peut les ouvrir dans un nouvel onglet, les copier, les suivre au clavier. Le routeur ajoute deux classes au lien de la page courante, et surtout aria-current="page", qui fait dire « page actuelle » au lecteur d'écran. Pour vérifier que le clic ne recharge rien, on pose une marque dans la page avant de cliquer sur « Le Petit Prince », puis on la relit :

après le clic : /livres/9782956300052 | window.marque = toujours là

L'adresse a changé, mais la variable globale window.marque a survécu : c'est toujours le même document. Un rechargement l'aurait effacée.

9.2.3 Le lien actif

Le routeur distingue deux classes :

• router-link-exact-active le lien mène exactement à la route courante ;
• router-link-active le lien mène à la route courante ou à l'un de ses parents dans la table des routes (routes imbriquées, plus loin).

Sur la fiche du Petit Prince, que devient le lien « Livres » ? Son adresse « commence par » /livres, et l'on pourrait croire que le lien reste actif. Relevé dans Chromium :

<a href="/" class="">Accueil</a>
<a href="/livres" class="">Livres</a>

9.3 Paramètres de route

La fiche reçoit l'ISBN de l'adresse. Avec props: true dans la route, le routeur passe chaque paramètre au composant comme une prop de même nom :

<script setup>
import { computed } from "vue";
import { RouterLink } from "vue-router";
import { livres } from "../livres.js";

const props = defineProps({ isbn: { type: String, required: true } });
const livre = computed(() => livres.find((l) => l.isbn === props.isbn));
</script>

<template>
  <template v-if="livre">
    <h1>{{ livre.titre }}</h1>
    <p>ISBN {{ livre.isbn }} — {{ livre.prix }} €</p>
  </template>
  <template v-else>
    <h1>Livre introuvable</h1>
    <p>Aucun livre n’a l’ISBN {{ isbn }}.</p>
  </template>
  <p><RouterLink to="/livres">Retour à la liste</RouterLink></p>
</template>