Navigation: navigate() Methode

Syntax

navigate(url)
navigate(url, options)

Parameter

url

Die Ziel-URL, zu der navigiert werden soll. Beachten Sie, dass bei einem Aufruf von navigate() auf dem navigation-Objekt eines anderen Fensters die URL relativ zur URL des Ziel-Fensters und nicht zur URL des aufrufenden Fensters aufgelöst wird. Dies entspricht dem Verhalten der History API, jedoch nicht dem Verhalten der Location API. Beachten Sie auch, dass javascript: URLs aus Sicherheitsgründen nicht erlaubt sind.

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthält:

state Optional

Vom Entwickler definierte Informationen, die im zugehörigen NavigationHistoryEntry gespeichert werden, sobald die Navigation abgeschlossen ist. Diese Informationen können über getState() abgerufen werden. Es kann sich um jeden Datentyp handeln. Sie könnten beispielsweise die Anzahl der Seitenbesuche zu Analysezwecken speichern oder Details des UI-Zustands speichern, sodass die Ansicht genau so angezeigt werden kann, wie der Benutzer sie zuletzt verlassen hat. Alle in state gespeicherten Daten müssen strukturiert klonbar sein.

info Optional

Vom Entwickler definierte Informationen, die dem navigate Ereignis übergeben werden, verfügbar in NavigateEvent.info. Es kann sich um jeden Datentyp handeln. Sie möchten beispielsweise neu navigierte Inhalte mit einer anderen Animation anzeigen, je nachdem, wie dorthin navigiert wurde (nach links wischen, nach rechts wischen oder nach Hause gehen). Ein String, der angibt, welche Animation verwendet werden soll, könnte in info übergeben werden.

history Optional

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

• auto: Der Standardwert; wird normalerweise eine push Navigation durchführen, aber unter besonderen Umständen eine replace Navigation durchführen (siehe die Beschreibung des NotSupportedError unten).
• push: Fügt einen neuen NavigationHistoryEntry zur Liste der Einträge hinzu oder schlägt unter besonderen Umständen fehl (siehe die Beschreibung des NotSupportedError unten).
• replace: Ersetzt den aktuellen NavigationHistoryEntry.

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 neuer NavigationHistoryEntry erstellt wurde.

finished

Ein Promise, das erfüllt wird, wenn alle von dem intercept() Handler zurückgegebenen Versprechen erfüllt sind. Dies entspricht der Erfüllung des NavigationTransition.finished Versprechens, wenn das navigatesuccess Ereignis ausgelöst wird.

Eines dieser Versprechen schlägt fehl, wenn die Navigation aus irgendeinem Grund fehlgeschlagen ist.

Ausnahmen

DataCloneError DOMException

Wird ausgelöst, wenn der state Parameter Werte enthält, die nicht strukturiert klonbar sind.

InvalidStateError DOMException

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

SyntaxError DOMException

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

NotSupportedError DOMException

Wird ausgelöst, wenn:

• Die history Option auf push gesetzt ist und der Browser derzeit das initiale about:blank Dokument anzeigt.
• Das Schema der url javascript ist.

Beispiele

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

Ein intelligenter Rückwärts-Button

Ein von der Seite bereitgestellter "Zurück"-Button kann Sie zurücknavigieren, selbst nach einem Neuladen, indem er die vorherigen Verlaufseinträge inspiziert:

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 Routinen: die Navigation API
• Navigation API Erläuterung