Dienavigate() Methode derNavigation Schnittstelle navigiert zu einer bestimmten URL und aktualisiert dabei ggf. bereitgestellten Zustand in der Liste der Verlaufseinträge.

Syntax

navigate(url)navigate(url, options)

Parameter

url

Die Ziel-URL, zu der navigiert werden soll. Beachten Sie, dass beim Aufrufen vonnavigate() auf demnavigation-Objekt eines anderen Fensters die URL relativ zur URL des Ziel-Fensters aufgelöst wird, nicht relativ zur URL des aufrufenden Fensters. Dies entspricht dem Verhalten derHistory API, jedoch nicht dem Verhalten derLocation API. Beachten Sie auch, dass#"#options">optionsOptional

Ein Optionsobjekt mit den folgenden Eigenschaften:

stateOptional

Vom Entwickler definierte Informationen, die im zugehörigenNavigationHistoryEntry gespeichert werden, sobald die Navigation abgeschlossen ist, und übergetState() abrufbar sind. Dies kann jeder Datentyp sein. Sie könnten beispielsweise eine Seitenaufrufzahl für Analysezwecke speichern oder Details zum UI-Zustand, sodass die Ansicht genau so angezeigt werden kann, wie der Benutzer sie zuletzt verlassen hat. Alle imstate gespeicherten Daten müssenstructured-cloneable sein.

infoOptional

Vom Entwickler definierte Informationen, die an dasnavigate Ereignis weitergegeben werden, verfügbar inNavigateEvent.info. Dies kann jeder Datentyp sein. Sie könnten beispielsweise wollen, dass neu navigierter Inhalt mit einer anderen Animation angezeigt wird, je nachdem, wie darauf navigiert wurde (nach links wischen, nach rechts wischen oder zur Startseite gehen). Eine Zeichenkette, die angibt, welche Animation verwendet werden soll, könnte alsinfo übergeben werden.

historyOptional

Ein enumerierter Wert, der das Verlaufverhalten dieser Navigation festlegt. Die verfügbaren Werte sind:

• auto: Der Standardwert; wird normalerweise einepush Navigation ausführen, aber einereplace Navigation unter besonderen Umständen ausführen (siehe die Beschreibung desNotSupportedError unten).
• push: Fügt einen neuenNavigationHistoryEntry zur Liste der Einträge hinzu oder schlägt unter besonderen Umständen fehl (siehe die Beschreibung desNotSupportedError unten).
• replace: Ersetzt den aktuellenNavigationHistoryEntry.

Rückgabewert

Ein Objekt mit den folgenden Eigenschaften:

committed

EinPromise, der erfüllt wird, wenn sich die sichtbare URL geändert hat und ein neuerNavigationHistoryEntry erstellt wurde.

finished

EinPromise, der erfüllt wird, wenn alle von derintercept() Handler zurückgegebenen Versprechen erfüllt sind. Dies entspricht dem Erfüllen des VersprechensNavigationTransition.finished, wenn dasnavigatesuccess Ereignis ausgelöst wird.

Jedes dieser Versprechen wird abgelehnt, wenn die Navigation aus irgendeinem Grund fehlgeschlagen ist.

Ausnahmen

DataCloneErrorDOMException

Wird ausgelöst, wenn derstate Parameter Werte enthält, die nicht structured-cloneable sind.

InvalidStateErrorDOMException

Wird ausgelöst, wenn das Dokument derzeit nicht aktiv ist.

SyntaxErrorDOMException

Wird ausgelöst, wenn derurl Parameter keine gültige URL ist.

NotSupportedErrorDOMException

Wird ausgelöst, wenn:

• Diehistory Option aufpush gesetzt ist und der Browser derzeit das initialeabout:blank Dokument anzeigt.
• Das Schema derurljavascript ist.

Beispiele

Einrichten des Home-Buttons

function initHomeBtn() {  // Get the key of the first loaded entry  // so the user can always go back to this view.  const { key } = navigation.currentEntry;  backToHomeButton.onclick = () => {    navigation.traverseTo(key);  };}// Intercept navigate events, such as link clicks, and// replace them with single-page navigationsnavigation.addEventListener("navigate", (event) => {  event.intercept({    async handler() {      // Navigate to a different view,      // but the "home" button will always work.    },  });});

Ein intelligenter Zurück-Button

Ein von der Seite bereitgestellter "Zurück"-Button kann Sie zurückführen, selbst nach einem Reload, indem frühere Verlaufseinträge überprüft werden:

backButtonEl.addEventListener("click", () => {  if (    navigation.entries()[navigation.currentEntry.index - 1]?.url ===    "/product-listing"  ) {    navigation.back();  } else {    // If the user arrived here in some other way    // e.g. by typing the URL directly:    navigation.navigate("/product-listing", { history: "replace" });  }});

Verwendung von info und state

async function navigateHandler() {  await navigation.navigate(url, {    info: { animation: "swipe-right" },    state: { infoPaneOpen: true },  }).finished;  // Update application state  // …}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Moderne clientseitige Routenverwaltung: die Navigation API
• Navigation API Erklärung