Signatur
Beschreibung
Die Eigenschaft id des Interfaces NavigationDestination ist schreibgeschützt. Sie gibt die id des NavigationHistoryEntry zurück, zu dem navigiert wird. Einen Wert gibt es aber nur, wenn NavigateEvent.navigationType den Wert "traverse" hat, also bei Vor- und Zurück-Navigation durch den Verlauf, etwa über navigation.traverseTo(), navigation.back() oder die Browser-Schaltflächen. Bei "push", "replace" und "reload" ist der Wert ein leerer String "".
Die id kennzeichnet genau einen Eintrag im Verlauf. Bei jedem neuen Eintrag entsteht eine neue id, auch dann, wenn per replace ein Eintrag mit demselben key ersetzt wird. Das ist der Unterschied zu NavigationDestination.key: Der key steht für den Platz im Verlauf, die id für den konkreten Eintrag.
In der Praxis nutzt man event.destination.id in einem navigate-Handler. Damit lassen sich zum Beispiel Zustände, Scroll-Positionen oder Daten aus einem Cache laden, die man vorher unter der id eines Eintrags gespeichert hat. Die id des aktuellen Eintrags liefert navigation.currentEntry.id.
Rückgabewert
id des Ziel-Eintrags (vom Browser erzeugter, eindeutiger String, meist eine UUID) bei navigationType === "traverse", sonst ein leerer String "".Beispiele
Ziel-ID im navigate-Handler auslesen
navigation.addEventListener("navigate", (event) => {
const { navigationType, destination } = event;
console.log(navigationType, JSON.stringify(destination.id));
});
// Test: neue Seite anlegen, dann zurück
await navigation.navigate("#detail").finished;
await navigation.back().finished;Pro Eintrag zwischengespeicherte Daten wiederherstellen
const cache = new Map();
// Daten zum aktuellen Eintrag unter seiner id speichern
const saveState = (data) => {
cache.set(navigation.currentEntry.id, data);
};
navigation.addEventListener("navigate", (event) => {
if (!event.canIntercept) return;
const targetId = event.destination.id;
event.intercept({
async handler() {
if (targetId && cache.has(targetId)) {
// traverse: Daten aus dem Cache nehmen, kein Netzwerkabruf
render(cache.get(targetId));
return;
}
const res = await fetch(event.destination.url);
const html = await res.text();
render(html);
}
});
});
const render = (html) => {
document.querySelector("main").innerHTML = html;
};id und key im Vergleich
navigation.addEventListener("navigate", (event) => {
if (event.navigationType !== "traverse") return;
const { id, key } = event.destination;
const target = navigation.entries().find((e) => e.id === id);
console.log("Ziel-Index:", target?.index, "key:", key);
});// Wichtig · Fallstricke
- Nur bei
traversegefüllt: Beipush,replaceundreloadist der Wert"". Prüfe deshalb immer auf einen leeren String, bevor du den Wert als Schlüssel verwendest. idoderkey: Nach einemreplaceändert sich dieid, derkeybleibt gleich. Speichere Zustand, der zu einem bestimmten Eintrag gehört, unter derid. Soll er an einer Position im Verlauf hängen bleiben, nimm denkey.- Nicht selbst auswerten: Die
idwird vom Browser erzeugt und hat keine Bedeutung, die man auslesen könnte. Sie ist nur innerhalb des aktuellen Dokuments bzw. der aktuellen Sitzung sinnvoll. - Kompatibilität: Die Navigation API ist seit Anfang 2026 Baseline (Chromium 102+, Safari 26.2+, Firefox 147+). Ältere Browser kennen sie nicht. Prüfe sie daher per
if (\"navigation\" in window)und sieh als Rückfallebene die History API (popstate) vor.