Navigation : méthode traverseTo()

Syntaxe

traverseTo(key)
traverseTo(key, options)

Paramètres

key

La clé (key) d'un NavigationHistoryEntry vers lequel naviguer.

options Facultatif

Un objet options contenant les propriétés suivantes :

info Facultatif

L'information définie par le·la développeur·euse à transmettre à l'évènement navigate, rendue disponible dans NavigateEvent.info. Ça peut être de n'importe quel type de données. Vous pouvez, par exemple, souhaiter afficher le contenu nouvellement navigué avec une animation différente selon la manière dont il a été navigué (glisser vers la gauche, glisser vers la droite ou aller à l'accueil). Une chaîne de caractères indiquant quelle animation utiliser peut être passée dans info.

Valeur de retour

Un objet avec les propriétés suivantes :

committed

Une promesse (Promise) qui est complétée lorsque l'URL visible a changé et qu'une nouvelle NavigationHistoryEntry a été créée.

finished

Une promesse (Promise) qui est complétée lorsque toutes les promesses retournées par le gestionnaire intercept() sont complétées. Cela équivaut à la promesse NavigationTransition.finished qui est complétée lorsque l'évènement navigatesuccess se déclenche.

Chacune de ces promesses est rompue si la navigation a échoué pour une raison quelconque.

Exceptions

InvalidStateError DOMException

Levée si la valeur NavigationHistoryEntry.index de Navigation.currentEntry est -1, ce qui signifie que le Document actuel n'est pas encore actif, ou si la liste de l'historique de navigation ne contient pas de NavigationHistoryEntry avec la clé définie, ou si le Document actuel est en cours de déchargement.

Exemples

Configurer le bouton d'accueil

function initBoutonAccueil() {
  // Obtient la clé de la première entrée chargée
  // afin que l'utilisateur·ice puisse toujours revenir à cette vue.
  const { key } = navigation.currentEntry;
  backToHomeButton.onclick = () => {
    navigation.traverseTo(key);
  };
}
// Intercepte les évènements de navigation, tels que les clics sur les
// liens, et les remplace par des navigations sur une seule page
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // Navigue vers une vue différente,
      // mais le bouton « accueil » fonctionne toujours.
    },
  });
});

Spécifications

Compatibilité des navigateurs

Voir aussi

• Routage moderne côté client : l'API Navigation ^(angl.)
• Présentation de l'API Navigation ^(angl.)