HTML-Tools

Kostenlose Navigation API Router Snippet Generator

Generieren Sie JavaScript-Routing-Snippets mit der Navigation API fur SPAs ohne History-API.

Tool wird geladen...

Was ist Navigation API Router Snippet Generator?

Die Navigation API ist eine moderne Browser-API, die Navigationen durch einen navigation.addEventListener('navigate', ...)-Handler abfängt. Im Gegensatz zur History API, die nur ein popstate-Event bei Rückwärts-/Vorwärts-Navigation auslöst, erfasst die Navigation API alle Navigationstypen einschließlich Link-Klicks, Formularübermittlungen, programmatische Navigation und Browser-Vorwärts/Rückwärts. Sie integriert sich mit der View Transition API für animierte Seitenwechsel und bietet integrierte Scroll-Wiederherstellung und Navigations-Lebenszyklusverwaltung.

Kurze Antwort

Generieren Sie clientseitige Routing-JavaScript-Snippets mit der Navigation API. Konfigurieren Sie Routenmuster mit URLPattern, Abfangoptionen für Link-Klicks und Browser-Navigation, View-Transition-Integration für animierte Seitenwechsel und Scroll-Wiederherstellungsverhalten. Die Navigation API (Chrome 102+, Safari 16.4+, Firefox 131+) ersetzt die History API durch ein einheitliches navigate-Event, AbortSignal zur Stornierung und integrierte View-Transition-Unterstützung.

Last updated: 2026-05-31

Einschränkungen

Die Navigation API wird noch nicht in allen Browsern unterstützt. Chrome 102+, Edge 102+, Safari 16.4+ und Firefox 131+ unterstützen sie. Ältere Browser benötigen einen Fallback zur History API oder zur serverseitigen Navigation.
Die View-Transition-Integration erfordert sowohl die Navigation API als auch die View Transition API. Cross-Document-View-Übergänge sind ein neueres Feature innerhalb der View Transition API und haben zusätzliche Browseranforderungen über die Navigation API-Baseline hinaus.
Die Navigation API behandelt keine anwendungsbezogenen Belange wie Lazy Loading, Code-Splitting oder Daten-Caching. Diese müssen separat in den Routen-Handlern implementiert werden.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Definieren Sie Routenmuster mit URLPattern-Objekten oder einfachen Pfad-Matchern. Jede Route kann eine Handler-Funktion haben, die Inhalte abruft und das DOM aktualisiert.
Konfigurieren Sie die Navigationsabfangoptionen: alle Navigationen abfangen, nur Same-Origin-Navigationen oder bestimmte Navigationstypen (push, replace, reload, traverse).
Aktivieren Sie die View-Transition-Integration, um zwischen Seitenzuständen mit document.startViewTransition innerhalb des navigate-Handlers zu animieren.
Wählen Sie das Scroll-Wiederherstellungsverhalten: automatische Wiederherstellung der vorherigen Scrollposition, Scrollen zum Seitenanfang bei jeder Navigation oder benutzerdefinierte Scroll-Ziele pro Route.

Wofür du es nutzen kannst

Erstellen Sie einen Single-Page-Application-Router mit ordnungsgemäßer Vorwärts-/Rückwärts-Navigationsunterstützung und keinen Race-Conditions zwischen gleichzeitigen Navigationsanfragen.
Erstellen Sie eine Multi-Page-Anwendung mit progressiv verbesserter clientseitiger Navigation, die auf nicht unterstützten Browsern elegant zu vollständigen Seitenladungen zurückfällt.
Implementieren Sie animierte Seitenübergänge zwischen Ansichten mit der View Transition API innerhalb des Navigation API navigate-Handlers.

Anwendungsfalle

Praxisbeispiele

Beispiel

SPA mit Routenmustern und View-Übergängen

Eine Dokumentationsseite wünscht clientseitige Navigation mit animierten Übergängen zwischen Seiten. Verwenden Sie die Navigation API, um Link-Klicks abzufangen, URLPatterns für jeden Abschnitt zu verwenden, fetch() zum Laden von Inhalten aufzurufen, das DOM-Update in document.startViewTransition für Crossfade-Animationen zu verpacken und navigation.updateCurrentEntry({ state }) aufzurufen, um den Such-/Filterstatus pro Route zu speichern.

Beispiel

Multi-Page-App mit progressiver Verbesserung

Eine Content-Site möchte schnellere Navigation ohne vollständigen SPA-Neubau. Generieren Sie Code, der Same-Origin-Navigationen über navigation.addEventListener('navigate', ...) abfängt, den aktuellen fetch abbricht, wenn eine neue Navigation beginnt (um Race-Conditions zu verhindern), den Hauptinhaltsbereich aktualisiert und bei deaktiviertem JavaScript oder nicht verfügbarer Navigation API auf vollständige Seitenladungen zurückfällt.

Haufige Fehler

Event.preventDefault() vor event.intercept() nicht aufzurufen — das navigate-Event muss synchron abgefangen werden, um zu verhindern, dass der Browser seine eigene Navigation startet. Rufen Sie immer beide preventDefault() und intercept() im Handler auf.
Den event.signal-Abort-Controller zu ignorieren — die Navigation API stellt ein AbortSignal bei jedem navigate-Event bereit. Langlaufende fetch-Operationen sollten auf event.signal hören, um veraltete Anfragen abzubrechen, wenn eine neue Navigation beginnt, und so Race-Conditions zu verhindern.
Nicht mit dem traversal-Typ umzugehen — Vorwärts-/Rückwärts-Navigationen lösen ein navigate-Event mit navigationType 'traverse' aus. Routen müssen zwischen push/replace und traverse unterscheiden, um die Scrollposition korrekt wiederherzustellen und ein erneutes Abrufen zwischengespeicherter Inhalte zu vermeiden.

Überprüfung

Öffnen Sie die Browser-Konsole und navigieren Sie zwischen Routen durch Link-Klicks. Überprüfen Sie, ob jedes navigate-Event mit dem korrekten navigationType (push, replace, traverse) ausgelöst wird und das DOM ohne vollständigen Seitenneuladen aktualisiert wird.
Öffnen Sie den Network-Tab, starten Sie eine Routennavigation und navigieren Sie schnell zu einer anderen Route. Überprüfen Sie, ob die erste Anfrage über das AbortSignal storniert wird, indem Sie nach einer abgebrochenen oder stornierten HTTP-Anfrage im Network-Tab suchen.

FAQ

Fragen zu Navigation API Router Snippet Generator

Wie unterscheidet sich die Navigation API von der History API für SPA-Routing?

Die History API löst nur ein popstate-Event bei Rückwärts-/Vorwärts-Navigation aus. Link-Klicks, programmatische pushState/replaceState und Neuladungen werden nicht erfasst — Sie müssen all diese Pfade manuell abfangen. Die Navigation API löst ein einziges navigate-Event für jeden Navigationstyp (push, replace, reload, traverse) aus und bietet zusätzlich ein AbortSignal zur Stornierung, ein FocusChanged-Event für Barrierefreiheit sowie integrierte View-Transition- und Scroll-Wiederherstellungsunterstützung.

Kann die Navigation API für ältere Browser polygefüllt werden?

Es gibt kein vollständiges Polyfill für die Navigation API, da sie eine tiefe Browser-Integration mit der Navigations-Engine erfordert. Für Browser, die sie nicht unterstützen (Chrome < 102, Safari < 16.4, Firefox < 131), sollte Ihre SPA auf die History API mit manuellem Link-Klick-Abfangen oder auf vollständige serverseitige Navigation zurückfallen. Die generierten Snippets enthalten eine Feature-Erkennungsabsicherung für diesen Zweck.

Wie funktionieren View-Übergänge mit der Navigation API?

Innerhalb des navigate-Event-Handlers, nach dem Aufruf von event.intercept(), umwickeln Sie Ihren DOM-Update-Code in document.startViewTransition(() => { ... }). Der Browser erfasst dann den alten und neuen Seitenzustand, erzeugt eine Crossfade-Animation zwischen ihnen und aktualisiert das DOM innerhalb des Transition-Callbacks. Die viewTransition-Option der Navigation API auf intercept() kann diese Integration optional automatisch in unterstützenden Browsern handhaben.

Verwandte Tools