NavigationDestination.index — Eigenschaft · JavaScript-Referenz

Signatur

NavigationDestination.index

Beschreibung

Die Eigenschaft index eines NavigationDestination-Objekts gibt an, an welcher Position im Verlauf der Navigation API das Ziel einer Navigation liegt. Das Objekt erreichen Sie über NavigateEvent.destination im navigate-Ereignis von window.navigation.

Einen sinnvollen Wert (0 oder größer) bekommen Sie nur, wenn NavigateEvent.navigationType den Wert "traverse" hat, also bei Vor- und Zurück-Sprüngen durch den Verlauf, z. B. mit navigation.back(), navigation.forward(), navigation.traverseTo() oder den Browser-Schaltflächen. Bei "push", "replace" und "reload" ist der Wert immer -1, weil das Ziel noch kein eigener Eintrag im Verlauf ist.

Typische Anwendungsfälle:

die Richtung einer Traversierung erkennen, indem Sie den Wert mit navigation.currentEntry.index vergleichen, etwa um die passende Übergangsanimation (vor oder zurück) zu wählen,
abschätzen, wie viele Schritte ein Sprung umfasst,
Zustände aus einem Cache laden, der nach Verlaufsindex sortiert ist.

Beispiele

Richtung einer Verlaufsnavigation erkennen

navigation.addEventListener('navigate', (event) => {
  const { index } = event.destination;
  if (event.navigationType !== 'traverse' || index === -1) return;

  const aktuell = navigation.currentEntry.index;
  const richtung = index < aktuell ? 'zurück' : 'vorwärts';
  console.log(`Traversierung ${richtung}: ${aktuell} → ${index}`);
});

// Auslösen, z. B. per Button:
// navigation.back();

Traversierung zurück: 3 → 2

-1 bei push-Navigationen

navigation.addEventListener('navigate', (event) => {
  console.log(event.navigationType, event.destination.index);
});

// Neue URL anlegen: das Ziel ist noch kein Eintrag im Verlauf
navigation.navigate('/produkte?seite=2');

push -1

Passende View-Transition-Animation wählen

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

  const ziel = event.destination.index;
  const start = navigation.currentEntry.index;
  const zurueck = event.navigationType === 'traverse' && ziel !== -1 && ziel < start;

  event.intercept({
    async handler() {
      document.documentElement.dataset.richtung = zurueck ? 'zurueck' : 'vor';
      const html = await (await fetch(event.destination.url)).text();
      const update = () => { document.querySelector('main').innerHTML = html; };
      if (document.startViewTransition) {
        await document.startViewTransition(update).finished;
      } else {
        update();
      }
    }
  });
});

// Wichtig · Fallstricke

Nur bei traverse aussagekräftig: Prüfen Sie immer navigationType oder vergleichen Sie mit -1, bevor Sie den Wert verwenden. Sonst erhalten Sie z. B. falsche Richtungsangaben.
Der Index bezieht sich nur auf die Einträge dieses Dokuments bzw. derselben Herkunft (navigation.entries()). Einträge fremder Herkunft im Sitzungsverlauf zählen nicht mit.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ignoriert und lösen im Strict Mode keinen Fehler aus, weil es sich um einen reinen Getter handelt.
Kompatibilität: Die Navigation API wird in Chromium-Browsern seit Version 102 unterstützt. Firefox und Safari bieten sie erst seit Kurzem an. Prüfen Sie die Unterstützung mit 'navigation' in window und greifen Sie bei Bedarf auf die History API (popstate) zurück.
Den kompletten Eintrag erhalten Sie bei Bedarf mit navigation.entries()[index] oder über destination.key bzw. destination.id.

Siehe auch

NavigationDestination.id NavigationDestination.key NavigationDestination.url NavigationDestination.sameDocument NavigationActivation.entry