NavigateEvent : propriété navigationType

Baseline 2026

Nouvellement disponible

Depuis janvier 2026, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Voir la compatibilité complète
En savoir plus

La propriété en lecture seule navigationType de l'interface NavigateEvent retourne le type de la navigation — push, reload, replace ou traverse.

Valeur

Une valeur énumérée représentant le type de navigation.

Les valeurs possibles sont :

push: Une nouvelle localisation est visitée, ce qui provoque l'ajout d'une nouvelle entrée dans la liste de l'historique.
reload: La valeur de Navigation.currentEntry est rechargée.
replace: La valeur de Navigation.currentEntry est remplacée par une nouvelle entrée dans l'historique. Cette nouvelle entrée réutilise la même key, mais se voit attribuer un id différent.
traverse: Le navigateur navigue d'une entrée existante de l'historique vers une autre entrée existante de l'historique.

Il est parfois souhaitable de gérer les navigations arrière/avant de manière spéciale, par exemple en réutilisant des vues mises en cache en les faisant apparaître à l'écran. Cela peut être fait en procédant comme suit :

navigation.addEventListener("navigate", (event) => {
  // Certaines navigations, par exemple les navigations inter-origines,
  // ne peuvent pas être interceptées. Laissez le navigateur les gérer normalement.
  if (!event.canIntercept) {
    return;
  }

  // N'intercepte pas les navigations par fragment ou les téléchargements.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    async handler() {
      if (monCadriciel.currentPage) {
        await monCadriciel.currentPage.transitionOut();
      }

      let { key } = event.destination;

      if (
        event.navigationType === "traverse" &&
        monCadriciel.previousPages.has(key)
      ) {
        await monCadriciel.previousPages.get(key).transitionIn();
      } else {
        // Cela entraîne probablement le stockage par monCadriciel
        // de la page rendue dans monCadriciel.previousPages.
        await monCadriciel.renderPage(event.destination);
      }
    },
  });
});