NavigateEvent.navigationType — Eigenschaft · JavaScript-Referenz

Signatur

NavigateEvent.navigationType

Beschreibung

Die Eigenschaft navigationType des NavigateEvent-Interfaces gibt an, welche Art von Navigation das navigate-Ereignis auf window.navigation ausgelöst hat. Sie ist schreibgeschützt und enthält immer einen von vier Werten:

"push": Ein neuer Eintrag wird im Verlauf angelegt, z. B. durch einen Linkklick, navigation.navigate(url) oder history.pushState().
"replace": Der aktuelle Eintrag wird ersetzt, z. B. durch navigation.navigate(url, { history: "replace" }), location.replace() oder history.replaceState().
"reload": Die aktuelle Seite wird neu geladen (navigation.reload(), location.reload(), Neu-laden-Schaltfläche des Browsers).
"traverse": Der Nutzer bewegt sich im Verlauf, z. B. über Zurück/Vor, history.back() oder navigation.traverseTo().

Besonders nützlich ist die Eigenschaft in Single-Page-Anwendungen, die Navigationen über event.intercept() selbst verarbeiten. Anhand des Typs kann man unterschiedlich reagieren: Bei "push" nach oben scrollen, bei "traverse" die Scrollposition wiederherstellen, bei "reload" Daten neu vom Server holen statt aus dem Zwischenspeicher, oder Übergangsanimationen je nach Richtung wählen.

Die Eigenschaft gibt nur über die Art der Navigation Auskunft, nicht über ihre Richtung. Bei "traverse" muss man dafür event.destination.index mit navigation.currentEntry.index vergleichen.

Rückgabewert

Typ

"push" | "replace" | "reload" | "traverse"

Beschreibung

Ein String, der den Navigationstyp beschreibt (Aufzählungstyp NavigationType).

Beispiele

Navigationstyp protokollieren

navigation.addEventListener("navigate", (event) => {
  console.log(`Navigation (${event.navigationType}) nach ${event.destination.url}`);
});

// Auslösen per Code:
navigation.navigate("/produkte");
navigation.navigate("/produkte?seite=2", { history: "replace" });

Navigation (push) nach https://example.com/produkte Navigation (replace) nach https://example.com/produkte?seite=2

SPA-Router: je nach Typ unterschiedlich reagieren

const renderRoute = async (url, { frisch = false } = {}) => {
  const res = await fetch(url.pathname + "?partial=1", {
    cache: frisch ? "reload" : "default",
  });
  document.querySelector("main").innerHTML = await res.text();
};

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);

  event.intercept({
    // Bei traverse stellt der Browser die Scrollposition selbst wieder her
    scroll: "after-transition",
    handler: async () => {
      await renderRoute(url, { frisch: event.navigationType === "reload" });

      if (event.navigationType === "push" || event.navigationType === "replace") {
        document.querySelector("h1")?.focus();
      }
    },
  });
});

Richtung bei Verlaufsnavigation bestimmen

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

  const ziel = event.destination.index;
  const aktuell = navigation.currentEntry.index;
  const richtung = ziel < aktuell ? "zurück" : "vor";

  document.documentElement.dataset.transition = richtung;
  console.log(`Verlauf: ${richtung} (${aktuell} → ${ziel})`);
});

history.back();

Verlauf: zurück (3 → 2)

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Navigation API gibt es in Chromium-Browsern seit Version 102, in Firefox und Safari erst seit Kurzem (Firefox 147, Safari 26.2). Prüfe die Unterstützung vor der Verwendung mit if ("navigation" in window) und sieh eine Ausweichlösung über popstate/History API vor.
"reload"- und "traverse"-Navigationen zu anderen Dokumenten lassen sich nicht immer abfangen. Prüfe deshalb vor intercept() stets event.canIntercept. Traverse-Navigationen sind außerdem oft nicht abbrechbar (event.cancelable === false), dann bewirkt preventDefault() nichts.
Auch history.pushState() und history.replaceState() lösen ein navigate-Ereignis mit dem Typ "push" bzw. "replace" aus. Das kann in gemischten Codebasen zu doppelter Verarbeitung führen.
Ein Wechsel nur des Fragments (#anker) ist in der Regel vom Typ "push". Unterscheide ihn über event.hashChange.
Den Typ der ersten Seitenladung liefert diese Eigenschaft nicht, denn dafür wird kein navigate-Ereignis ausgelöst. Dafür ist performance.getEntriesByType("navigation")[0].type zuständig.

Siehe auch

Navigation NavigateEvent.canIntercept NavigateEvent.destination NavigateEvent.hashChange NavigateEvent.signal