NavigateEvent.destination — Eigenschaft · JavaScript-Referenz

Signatur

NavigateEvent.destination

Beschreibung

Die Eigenschaft destination eines NavigateEvent beschreibt, wohin eine Navigation führt. Das Event wird auf window.navigation ausgelöst, sobald eine Navigation beginnt. Das gilt für Link-Klicks, Formular-Absendungen, navigation.navigate(), history.pushState() und Zurück/Vor-Traversierungen.

Das zurückgegebene NavigationDestination-Objekt bietet unter anderem:

url: die vollständige Ziel-URL als String,
key und id: Schlüssel und ID des Ziel-History-Eintrags (nur bei navigationType === "traverse" gefüllt, sonst leerer String),
index: Position des Eintrags in navigation.entries() (-1, wenn es kein bestehender Eintrag ist),
sameDocument: true, wenn die Navigation innerhalb desselben Dokuments bleibt,
getState(): liefert den mit der Navigation verknüpften Zustand (z. B. aus navigation.navigate(url, { state })).

In Single-Page-Anwendungen ist destination die zentrale Informationsquelle für clientseitiges Routing: Man liest event.destination.url, sucht die passende Route und fängt die Navigation mit event.intercept() ab, um den Inhalt selbst zu rendern.

Rückgabewert

Typ

NavigationDestination

Beschreibung

Ein NavigationDestination-Objekt mit url, key, id, index, sameDocument und der Methode getState(). Die Eigenschaft ist schreibgeschützt.

Beispiele

Ziel-URL einer Navigation protokollieren

navigation.addEventListener("navigate", (event) => {
  const { url, sameDocument, index } = event.destination;
  console.log(`Navigation nach ${url}`);
  console.log(`Gleiches Dokument: ${sameDocument}, Index: ${index}`);
});

// Auslösen, z. B. per:
navigation.navigate("/produkte?seite=2");

Navigation nach https://example.com/produkte?seite=2 Gleiches Dokument: false, Index: -1

Einfacher SPA-Router mit intercept()

const routes = {
  "/": () => "<h1>Startseite</h1>",
  "/kontakt": () => "<h1>Kontakt</h1>",
};

navigation.addEventListener("navigate", (event) => {
  // Nur abfangbare Navigationen ohne Downloads/Hash-Sprünge behandeln
  if (!event.canIntercept || event.hashChange || event.downloadRequest !== null) return;

  const url = new URL(event.destination.url);
  // Fremde Origins nicht anfassen
  if (url.origin !== location.origin) return;

  const render = routes[url.pathname];
  if (!render) return; // normale Navigation zulassen

  event.intercept({
    async handler() {
      document.querySelector("#app").innerHTML = render();
    },
  });
});

Zustand des Ziels mit getState() auslesen

navigation.addEventListener("navigate", (event) => {
  const state = event.destination.getState();
  if (state?.scrollTo) {
    console.log(`Scrolle nach dem Laden zu: ${state.scrollTo}`);
  }
});

navigation.navigate("/artikel/42", { state: { scrollTo: "#kommentare" } });

Scrolle nach dem Laden zu: #kommentare

Zurück-Navigation erkennen

navigation.addEventListener("navigate", (event) => {
  if (event.navigationType !== "traverse") return;

  const currentIndex = navigation.currentEntry.index;
  const richtung = event.destination.index < currentIndex ? "zurück" : "vor";
  console.log(`Traversierung ${richtung} zu Eintrag ${event.destination.key}`);
});

navigation.back();

Traversierung zurück zu Eintrag 3f2a…

// Wichtig · Fallstricke

Browser-Unterstützung: Die Navigation API gibt es in Chromium-Browsern seit Version 102. Firefox und Safari unterstützen sie erst in neueren Versionen (Firefox 147, Safari 26.2). Vor der Nutzung sollte man mit if ("navigation" in window) prüfen und für ältere Browser auf popstate/History-API ausweichen.
destination.url ist ein String und kein URL-Objekt. Zum Auswerten also new URL(event.destination.url) verwenden.
key und id sind nur bei navigationType === "traverse" gefüllt. Bei push, replace und reload sind sie leere Strings und index ist -1.
getState() liefert eine strukturierte Kopie (structured clone). Änderungen am Rückgabewert wirken sich nicht auf den gespeicherten Zustand aus.
Sicherheit: Die Ziel-URL kann von außen kommen (z. B. über manipulierte Links). Pfad- und Query-Parameter daher nie ungeprüft per innerHTML ins DOM schreiben, sonst droht XSS. Außerdem die Origin prüfen, bevor man eine Navigation abfängt.
Nicht jede Navigation lässt sich abfangen: Vor intercept() immer event.canIntercept prüfen (z. B. ist es bei Cross-Origin-Zielen false).

Siehe auch

NavigateEvent.info NavigateEvent.signal NavigateEvent.formData NavigateEvent.hashChange NavigateEvent.navigationType