Navigation: traverseTo()-Methode

Syntax

traverseTo(key)
traverseTo(key, options)

Parameter

key

Der key des NavigationHistoryEntry, zu dem navigiert werden soll.

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthält:

info Optional

Vom Entwickler definierte Informationen, die an das navigate-Ereignis übergeben werden sollen und in NavigateEvent.info verfügbar sind. Dies kann jeder Datentyp sein. Beispielsweise könnten Sie den neu navigierten Inhalt abhängig davon, wie er aufgerufen wurde (nach links wischen, nach rechts wischen oder nach Hause gehen), mit einer anderen Animation anzeigen. Ein String, der angibt, welche Animation verwendet werden soll, könnte als info übergeben werden.

Rückgabewert

Ein Objekt mit den folgenden Eigenschaften:

committed

Ein Promise, das erfüllt wird, wenn sich die sichtbare URL geändert hat und ein neues NavigationHistoryEntry erstellt wurde.

finished

Ein Promise, das erfüllt wird, wenn alle vom intercept()-Handler zurückgegebenen Promises erfüllt sind. Dies entspricht dem Erfüllen des NavigationTransition.finished-Promises, wenn das navigatesuccess-Ereignis ausgelöst wird.

Eines dieser Promises wird abgelehnt, wenn die Navigation aus irgendeinem Grund fehlgeschlagen ist.

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn der Navigation.currentEntry's NavigationHistoryEntry.index-Wert -1 ist, was bedeutet, dass das aktuelle Document noch nicht aktiv ist, oder wenn die Navigation-Verlaufsliste kein NavigationHistoryEntry mit dem angegebenen Schlüssel enthält, oder wenn das aktuelle Document entladen wird.

Beispiele

Heimtasten-Einrichtung

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 navigations
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // Navigate to a different view,
      // but the "home" button will always work.
    },
  });
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Moderne client-seitige Routenführung: die Navigation API
• Navigation API Erklärer