jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis Navigation API Router Snippet Generator

Genereer JavaScript routering snippets met de Navigation API voor SPA's zonder History API.

Tool laden...

Wat is Navigation API Router Snippet Generator?

De Navigation API is een moderne browser-API die navigaties onderschept via een navigation.addEventListener('navigate', ...)-handler. In tegenstelling tot de History API, die alleen een popstate-event vuurt bij achteruit/vooruit-navigatie, legt de Navigation API alle navigatietypes vast, waaronder linkklikken, formulierinzendingen, programmatische navigatie en browser terug/vooruit. Het integreert met de View Transition API voor geanimeerde paginaovergangen en biedt ingebouwde scroll-herstel- en navigatielevenscyclusbeheer.

Snel antwoord

Genereer client-side routing JavaScript-snippets met de Navigation API. Configureer routepatronen met URLPattern, interceptie-opties voor linkklikken en browsernavigatie, view transition-integratie voor geanimeerde paginaovergangen en scrollherstelgedrag. De Navigation API (Chrome 102+, Safari 16.4+, Firefox 131+) vervangt de History API met een uniform navigate-event, AbortSignal voor annulering en ingebouwde view transition-ondersteuning.

Last updated: 2026-05-31

Beperkingen

  • De Navigation API wordt nog niet in alle browsers ondersteund. Chrome 102+, Edge 102+, Safari 16.4+ en Firefox 131+ ondersteunen het. Oudere browsers vereisen een fallback naar de History API of server-side navigatie.
  • View transition-integratie vereist zowel de Navigation API als View Transition API-ondersteuning. Cross-document view transitions zijn een nieuwere functie binnen de View Transition API en hebben aanvullende browsereisen bovenop de Navigation API-basisvereisten.
  • De Navigation API handelt geen applicatieniveau-zaken af zoals lazy loading, code splitting of data-caching. Deze moeten apart worden ge茂mplementeerd in de route-handlers.

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

Zo gebruik je deze tool

  1. Definieer routepatronen met URLPattern-objecten of eenvoudige pad-matcheraars. Elke route kan een handlerfunctie hebben die content ophaalt en de DOM bijwerkt.
  2. Configureer navigatie-interceptie-opties: alle navigaties onderscheppen, alleen same-origin-navigaties of specifieke navigatietypes (push, replace, reload, traverse).
  3. Schakel view transition-integratie in om tussen paginastatus te animeren met document.startViewTransition binnen de navigate-handler.
  4. Selecteer scrollherstelgedrag: automatisch herstel naar vorige scrollpositie, naar boven scrollen bij elke navigatie of aangepaste scrolldoelen per route.

Waarvoor je het kunt gebruiken

  • Bouw een single-page applicatierouter met correcte terug/vooruit-navigatieondersteuning en zonder racecondities tussen gelijktijdige navigatieverzoeken.
  • Maak een multi-page applicatie met progressief verbeterde client-side navigatie die elegant terugvalt op volledige paginaladingen in niet-ondersteunde browsers.
  • Implementeer geanimeerde paginaovergangen tussen weergaven met de View Transition API binnen de Navigation API navigate-handler.

Gebruik

Praktische voorbeelden

Voorbeeld

SPA met routepatronen en view transitions

Een documentatiesite wil client-side navigatie met geanimeerde overgangen tussen pagina's. Gebruik de Navigation API om linkklikken te onderscheppen, URLPatterns voor elke sectie te matchen, fetch() aan te roepen om content te laden, de DOM-update in document.startViewTransition te wrappen voor crossfade-animaties en navigation.updateCurrentEntry({ state }) aan te roepen om zoek-/filterstatus per route te behouden.

Voorbeeld

Multi-page app met progressieve verbetering

Een contentsite wil snellere navigatie zonder volledige SPA-herbouw. Genereer code die same-origin-navigaties onderschept via navigation.addEventListener('navigate', ...), de huidige fetch annuleert als een nieuwe navigatie start (racecondities voorkomen), het hoofdcontentgebied bijwerkt en terugvalt op volledige paginaladingen wanneer JavaScript is uitgeschakeld of de Navigation API niet beschikbaar is.

Veelgemaakte fouten

  • Event.preventDefault() niet aanroepen v贸贸r event.intercept() —het navigate-event moet synchroon worden onderschept om te voorkomen dat de browser zijn eigen navigatie start. Roep altijd zowel preventDefault() als intercept() aan in de handler.
  • De event.signal abort-controller negeren —de Navigation API biedt een AbortSignal op elk navigate-event. Langlopende fetch-operaties moeten luisteren naar event.signal om verouderde verzoeken te annuleren wanneer een nieuwe navigatie start, om racecondities te voorkomen.
  • Vergeten traversal-type-navigaties af te handelen —terug/vooruit-navigaties vuren een navigate-event met navigationType 'traverse'. Routes moeten onderscheid maken tussen push/replace en traverse om de scrollpositie correct te herstellen en het opnieuw ophalen van gecachte content te voorkomen.

Verificatie

  1. Open de browserconsole en navigeer tussen routes via linkklikken. Controleer of elk navigate-event met de juiste navigationType (push, replace, traverse) wordt gevuurd en of de DOM wordt bijgewerkt zonder volledige paginalading.
  2. Open het Network-tabblad, start een routenavigatie en navigeer snel naar een andere route. Controleer of het eerste verzoek wordt geannuleerd via de AbortSignal door te controleren op een geannuleerd HTTP-verzoek in het Network-tabblad.

FAQ

Vragen over Navigation API Router Snippet Generator

Hoe verschilt de Navigation API van de History API voor SPA-routing?

De History API vuurt alleen een popstate-event bij terug/vooruit-navigatie. Linkklikken, programmatische pushState/replaceState en reloads worden niet vastgelegd —u moet al deze paden handmatig onderscheppen. De Navigation API vuurt een enkel navigate-event voor elk navigatietype (push, replace, reload, traverse), plus biedt een AbortSignal voor annulering, een FocusChanged-event voor toegankelijkheid en ingebouwde view transition- en scrollherstelondersteuning.

Kan de Navigation API worden gepolyfilled voor oudere browsers?

Er is geen volledige polyfill voor de Navigation API omdat deze diepe browserintegratie met de navigatie-engine vereist. Voor browsers die het niet ondersteunen (Chrome <102, Safari <16.4, Firefox <131), moet uw SPA terugvallen op de History API met handmatige linkklik-interceptie of volledige server-side navigatie. De gegenereerde snippets bevatten een feature-detectieguard hiervoor.

Hoe werken view transitions met de Navigation API?

Inside de navigate-eventhandler, na het aanroepen van event.intercept(), wrap uw DOM-updatecode in document.startViewTransition(() => { ... }). De browser legt vervolgens de oude en nieuwe paginastatus vast, maakt een crossfade-animatie tussen beide en werkt de DOM bij in de transition-callback. De viewTransition-optie van de Navigation API op intercept() kan deze integratie optioneel automatisch afhandelen in ondersteunde browsers.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook