Signatur
Beschreibung
getState() wird auf dem Objekt event.destination aufgerufen, das im navigate-Ereignis der Navigation API verfügbar ist. Die Methode liefert den Zustand, den der Entwickler dem Navigationsziel mitgegeben hat. Das kann über die Option state von navigation.navigate() oder navigation.reload() geschehen. Bei Traversierungen (back(), forward(), traverseTo()) ist es der Zustand, der schon am Ziel-NavigationHistoryEntry gespeichert ist.
Nützlich ist das vor allem in Single-Page-Anwendungen. Ein Router kann damit schon bevor die Navigation abgeschlossen ist, also im navigate-Handler vor oder während event.intercept(), anhand des Zustands entscheiden, was gerendert wird, ob Daten geladen werden müssen oder wie die Scroll-Position wiederhergestellt wird. Ist die Navigation abgeschlossen, bekommt man denselben Zustand über navigation.currentEntry.getState().
Der Rückgabewert ist immer eine Kopie, die mit dem Structured-Clone-Algorithmus erzeugt wird. Änderungen an diesem Objekt wirken sich also nicht auf den gespeicherten Zustand aus. Wenn du den Zustand des aktuellen Eintrags ändern willst, nimm navigation.updateCurrentEntry({ state }).
Rückgabewert
undefined.Beispiele
Zustand im navigate-Handler auslesen
navigation.addEventListener('navigate', (event) => {
const state = event.destination.getState();
console.log('Ziel-URL:', event.destination.url);
console.log('Zustand:', state);
});
// Navigation mit Zustand auslösen
navigation.navigate('/produkte/42', { state: { quelle: 'suche', seite: 3 } });SPA-Router: Rendering anhand des Zustands steuern
navigation.addEventListener('navigate', (event) => {
if (!event.canIntercept || event.hashChange || event.downloadRequest) return;
const url = new URL(event.destination.url);
if (!url.pathname.startsWith('/artikel/')) return;
event.intercept({
async handler() {
const state = event.destination.getState() ?? {};
// Bereits vorgeladene Daten wiederverwenden, sonst nachladen
const artikel = state.artikel ?? await (await fetch(`/api${url.pathname}`)).json();
document.querySelector('main').textContent = artikel.titel;
}
});
});Rückgabewert ist eine Kopie
navigation.addEventListener('navigate', (event) => {
const state = event.destination.getState();
if (state) {
state.zaehler = 999; // ändert nur die Kopie
console.log(event.destination.getState().zaehler);
}
});
navigation.navigate(location.href, { state: { zaehler: 1 }, history: 'replace' });Traversierung: Zustand eines früheren Eintrags
navigation.addEventListener('navigate', (event) => {
if (event.navigationType === 'traverse') {
const { scrollY = 0 } = event.destination.getState() ?? {};
console.log('Wiederherzustellende Scroll-Position:', scrollY);
}
});
// Vor dem Verlassen Scroll-Position im aktuellen Eintrag speichern
navigation.updateCurrentEntry({ state: { scrollY: window.scrollY } });// Wichtig · Fallstricke
- Browser-Unterstützung: In Chromium-Browsern (Chrome, Edge, Opera) ist die Navigation API seit Version 102 verfügbar, in Firefox und Safari erst seit kurzem. Für ältere Browser brauchst du eine Feature-Erkennung wie
if ('navigation' in window)und als Rückfalllösung die History API (history.state). - Der Zustand muss strukturiert klonbar sein. Funktionen, DOM-Knoten oder Klasseninstanzen samt Prototyp lassen sich nicht übernehmen. Schon beim Setzen des Zustands (etwa bei
navigate()) wird dann eineDataCloneError-Ausnahme ausgelöst. - Jeder Aufruf erzeugt eine neue Kopie. Bei großen Zustandsobjekten lohnt es sich deshalb, das Ergebnis in einer Variablen zu speichern, statt die Methode mehrmals aufzurufen.
- Den Zustand bestimmt der Entwickler selbst, er hat nichts mit
history.statezu tun. Er bleibt über Neuladen und Traversierung hinweg erhalten, gilt aber nur für den gleichen Ursprung. - Ohne gesetzten Zustand ist der Rückgabewert
undefined. Setze deshalb am besten einen Standardwert, zum BeispielgetState() ?? {}.