NavigationDestination.url — Eigenschaft · JavaScript-Referenz

Signatur

NavigationDestination.url

Beschreibung

Die Eigenschaft url der Schnittstelle NavigationDestination enthält die vollständige, absolute URL, zu der eine Navigation führt. Man erreicht das Objekt über NavigateEvent.destination, also innerhalb eines Handlers für das Ereignis navigate auf window.navigation.

Gebraucht wird sie vor allem beim clientseitigen Routing in Single-Page-Anwendungen: Der Handler liest die Ziel-URL, macht daraus ein URL-Objekt und entscheidet anhand von Pfad, Suchparametern oder Hash, ob er die Navigation mit event.intercept() abfängt und selbst rendert oder sie dem Browser überlässt.

Der Wert ist immer schon aufgelöst. Relative Angaben wie <a href="/produkte"> oder navigation.navigate("../x") stehen hier bereits als absolute URL mit Protokoll und Host. Die Eigenschaft ist nur lesbar. Ein anderes Ziel legt man nicht durch Überschreiben fest, sondern indem man die Navigation abbricht und eine neue startet.

Rückgabewert

Typ

string

Beschreibung

Die absolute Ziel-URL der Navigation, z. B. "https://example.com/produkte?id=42#details".

Beispiele

Ziel-URL jeder Navigation protokollieren

navigation.addEventListener("navigate", (event) => {
  console.log("Navigiere zu:", event.destination.url);
});

// Auslösen, z. B. per Skript:
navigation.navigate("/kontakt");

Navigiere zu: https://example.com/kontakt

Einfacher SPA-Router mit intercept()

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

navigation.addEventListener("navigate", (event) => {
  // Nur gleiche Herkunft und abfangbare Navigationen behandeln
  if (!event.canIntercept || event.hashChange || event.downloadRequest) return;

  const url = new URL(event.destination.url);
  if (url.origin !== location.origin) return;

  const render = routes[url.pathname];
  if (!render) return; // unbekannter Pfad: Browser lädt normal

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

Suchparameter der Ziel-URL auswerten

navigation.addEventListener("navigate", (event) => {
  const { searchParams, pathname } = new URL(event.destination.url);
  if (pathname !== "/suche" || !event.canIntercept) return;

  const begriff = searchParams.get("q") ?? "";
  event.intercept({
    async handler() {
      const res = await fetch(`/api/suche?q=${encodeURIComponent(begriff)}`);
      const treffer = await res.json();
      console.log(`${treffer.length} Treffer für "${begriff}"`);
    },
  });
});

navigation.navigate("/suche?q=javascript");

12 Treffer für "javascript"

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Navigation API gibt es in Chromium-Browsern (Chrome, Edge, Opera) seit Version 102, in Safari ab 26.2 und in Firefox ab 147. Mit älteren Browsern im Blick vorher prüfen: if ("navigation" in window), sonst auf die History API zurückfallen.
Der Wert ist ein string, kein URL-Objekt. Zum Auswerten von Pfad oder Parametern also new URL(event.destination.url) verwenden.
Auch Navigationen zu fremden Herkünften lösen navigate aus. Deshalb vor intercept() die Herkunft oder event.canIntercept prüfen, sonst gibt es eine SecurityError-Ausnahme.
Die URL kann vom Nutzer kommen, etwa über manipulierte Links. Teile daraus nie ungeprüft per innerHTML ausgeben, sonst droht XSS.
Bei reinen Hash-Änderungen ist event.hashChange gleich true. Die URL unterscheidet sich dann nur im Fragment.

Siehe auch

NavigationDestination.id NavigationDestination.key NavigationDestination.index NavigationDestination.sameDocument NavigationActivation.from