Navigation: navigate() Methode

Syntax

navigate(url)
navigate(url, options)

Parameter

url

Die Ziel-URL, zu der navigiert werden soll. Beachten Sie, dass beim Aufruf von navigate() auf einem 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.

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthält:

state Optional

Entwicklerdefinierte Informationen, die beim Abschluss der Navigation im zugehörigen NavigationHistoryEntry gespeichert werden sollen und über getState() abrufbar sind. Dies kann jeder Datentyp sein. Zum Beispiel könnten Sie wünschen, eine Seiten-Besuchszählung für Analysezwecke zu speichern oder UI-Zustandsdetails zu speichern, damit die Ansicht genau so angezeigt werden kann, wie der Benutzer sie zuletzt verlassen hat. Alle im state gespeicherten Daten müssen struktur-klonbar sein.

info Optional

Entwicklerdefinierte Informationen, die im navigate-Event verfügbar gemacht werden sollen und in NavigateEvent.info abrufbar sind. Dies kann jeder Datentyp sein. Zum Beispiel könnten Sie wünschen, neu-navigierten Inhalt mit einer anderen Animation anzuzeigen, je nachdem, wie er navigiert wurde (links wischen, rechts wischen oder zur Startseite gehen). Ein String, der angibt, welche Animation verwendet werden soll, könnte als info übergeben werden.

history Optional

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

• auto: Der Standardwert; führt normalerweise eine push-Navigation aus, führt jedoch unter besonderen Umständen eine replace-Navigation durch (siehe Beschreibung des NotSupportedError weiter unten).
• push: Fügt einen neuen NavigationHistoryEntry zur Eintragsliste hinzu oder schlägt unter besonderen Umständen fehl (siehe Beschreibung des NotSupportedError weiter 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 Promise-Zurückgaben des intercept()-Handlers erfüllt werden. Dies entspricht dem Erfüllen des NavigationTransition.finished-Promise, wenn das navigatesuccess-Event ausgelöst wird.

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

Ausnahmen

DataCloneError DOMException

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

SyntaxError DOMException

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

NotSupportedError DOMException

Wird ausgelöst, wenn die Option history auf push gesetzt ist und einer der folgenden besonderen Umstände zutrifft:

• Der Browser zeigt derzeit das initiale about:blank-Dokument an.
• Das Schema der url ist javascript.

Beispiele

Einrichtung einer Home-Schaltfläche

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.
    },
  });
});

Eine intelligente Zurück-Schaltfläche

Eine von der Seite bereitgestellte "Zurück"-Schaltfläche kann Sie zurückführen, selbst nach einem Neuladen, indem sie die vorherigen Verlaufs-Einträ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 client-seitige Routings: die Navigation API
• Navigation API Erklärer