Navigation : méthode reload()

Syntaxe

reload()
reload(options)

Paramètres

options Facultatif

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

state Facultatif

L'information définie par le·la développeur·euse à stocker dans l'entrée d'historique associée NavigationHistoryEntry une fois la navigation terminée, récupérable avec getState(). Ça peut être de n'importe quel type de données. Vous pouvez, par exemple, stocker un compteur de visites de page à des fins d'analyse, ou stocker les détails de l'état de l'interface utilisateur afin que la vue puisse être affichée exactement comme l'utilisateur·ice l'a laissée. Toutes les données stockées dans state doivent être structurées et clonables.

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

DataCloneError DOMException

Levée si le paramètre state contient des valeurs qui ne sont pas clonables selon l'algorithme de clonage structuré.

Exemples

Utiliser l'information et l'état

async function gererRechargement() {
  await navigation.reload({
    info: { animation: "fade-in" },
    state: { infoPaneOpen: true },
  }).finished;

  // Met à jour l'état de l'application
  // …
}

Recharger la page et ajouter un nouvel élément d'état :

async function gererRechargement() {
  await navigation.reload({
    state: { ...navigation.currentEntry.getState(), newState: 3 },
  }).finished;

  // Met à jour l'état de l'application
  // …
}

Spécifications

Compatibilité des navigateurs

Voir aussi

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