NavigationTransition.navigationType — Eigenschaft · JavaScript-Referenz

Signatur

NavigationTransition.navigationType

Beschreibung

navigationType gehört zur Navigation API. Sie gibt an, welche Art von Navigation das NavigationTransition-Objekt gerade beschreibt. An dieses Objekt kommst du über navigation.transition. Es gibt dieses Objekt nur, solange eine abgefangene Navigation läuft, also zwischen event.intercept() im navigate-Ereignis und dem Abschluss der Navigation.

Mögliche Werte:

"push": Neue Navigation. Es entsteht ein neuer Eintrag im Verlauf, z. B. durch einen Link-Klick oder navigation.navigate(url).
"replace": Der aktuelle Verlaufseintrag wird ersetzt, z. B. durch navigation.navigate(url, { history: "replace" }).
"reload": Der aktuelle Eintrag wird neu geladen, z. B. durch navigation.reload().
"traverse": Sprung zu einem vorhandenen Verlaufseintrag, z. B. über Zurück/Vor, navigation.back() oder navigation.traverseTo().

In Single-Page-Anwendungen brauchst du die Eigenschaft, wenn du je nach Navigationsart unterschiedlich reagieren willst. Beispiele: die Scrollposition nur bei "traverse" wiederherstellen, Daten bei "reload" ohne Cache laden oder Übergangsanimationen je nach Richtung wählen. Derselbe Wert steht auch im navigate-Ereignis als NavigateEvent.navigationType. Über navigation.transition kannst du ihn aber auch später von anderen Stellen im Code abfragen, solange die Navigation noch läuft.

Rückgabewert

Typ

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

Beschreibung

Ein String mit dem Typ der laufenden Navigation. Die Eigenschaft ist schreibgeschützt.

Beispiele

Navigationstyp während einer abgefangenen Navigation auslesen

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

  event.intercept({
    handler: async () => {
      // navigation.transition existiert jetzt
      const typ = navigation.transition?.navigationType;
      console.log(`Navigation vom Typ: ${typ}`);

      const url = new URL(event.destination.url);
      const html = await fetch(`/partials${url.pathname}`).then((r) => r.text());
      document.querySelector("main").innerHTML = html;
    }
  });
});

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

Navigation vom Typ: push

Scrollposition nur beim Zurück/Vor-Navigieren beibehalten

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

  event.intercept({
    scroll: "manual",
    handler: async () => {
      await renderRoute(event.destination.url);

      const typ = navigation.transition?.navigationType;
      if (typ === "traverse" || typ === "reload") {
        // Browser stellt gespeicherte Scrollposition wieder her
        event.scroll();
      } else {
        window.scrollTo(0, 0);
      }
    }
  });
});

const renderRoute = async (url) => {
  const { pathname } = new URL(url);
  document.title = `Seite ${pathname}`;
};

Globaler Ladeindikator mit Navigationstyp

const zeigeStatus = () => {
  const transition = navigation.transition;
  if (!transition) {
    console.log("Keine Navigation aktiv");
    return;
  }
  console.log(`Läuft: ${transition.navigationType} von ${transition.from.url}`);
  transition.finished
    .then(() => console.log("Navigation abgeschlossen"))
    .catch(() => console.log("Navigation abgebrochen"));
};

navigation.addEventListener("navigate", (event) => {
  if (!event.canIntercept) return;
  event.intercept({
    handler: async () => {
      zeigeStatus();
      await new Promise((r) => setTimeout(r, 300));
    }
  });
});

navigation.reload();

Läuft: reload von https://example.com/produkte Navigation abgeschlossen

// Wichtig · Fallstricke

navigation.transition kann null sein: Ohne abgefangene Navigation, also ohne intercept(), oder nach ihrem Abschluss gibt es kein Transition-Objekt. Greif deshalb immer mit optionaler Verkettung (navigation.transition?.navigationType) oder nach einer Prüfung auf null zu.
Im navigate-Handler selbst, also noch vor intercept(), nimmst du besser event.navigationType. Zu diesem Zeitpunkt beschreibt navigation.transition noch nicht die neue Navigation.
Eine neue Navigation bricht die laufende ab. navigation.transition zeigt dann auf das neue Objekt. Wenn du den Typ später brauchst, speicher ihn deshalb am besten früh in einer Variablen.
Eine Navigation, die nur den Hash ändert (#anker), zählt ebenfalls als "push" oder "replace".
Kompatibilität: Die Navigation API gibt es in Chromium-Browsern seit Version 102. In Firefox und Safari kam sie erst deutlich später. Prüf die Unterstützung vorher mit if ("navigation" in window) und nutz sonst die History API (history.pushState, popstate) als Ersatz.

Siehe auch

NavigationTransition.committed NavigationTransition.finished NavigationTransition.to NavigationTransition.from NavigationActivation.navigationType