jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils HTML

Gratuit Generateur de snippets Navigation API Router

Generez des snippets de routage JavaScript avec l'API Navigation pour les SPAs, sans History API.

Chargement de l'outil...

Qu'est-ce que Generateur de snippets Navigation API Router ?

L'API Navigation intercepte les navigations via navigation.addEventListener('navigate'). Elle capture tous les types de navigation : clics, formulaires, programmatique, arriere/avant. S'integre a l'API View Transition.

Réponse rapide

Snippets de routage cote client avec l'API Navigation et URLPattern. Chrome 102+, Safari 16.4+, Firefox 131+.

Last updated: 2026-05-31

Limites

  • Support partiel des navigateurs.
  • Les transitions de vue necessitent le support de View Transition API.
  • Ne gere pas le chargement differe ou la mise en cache.

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

Comment utiliser cet outil

  1. Definissez des motifs de route avec URLPattern.
  2. Configurez l'interception des navigations.
  3. Activez les transitions de vue avec startViewTransition.
  4. Selectionnez la restauration du defilement.

A quoi il sert

  • Routeur SPA sans conditions de course.
  • Application multipage avec navigation progressive.
  • Transitions de page animes entre vues.

Cas d'usage

Exemples concrets

Exemple

SPA avec transitions de vue

Interception des clics, fetch du contenu, startViewTransition pour l'animation.

Exemple

Application multipage progressive

Navigation interceptee avec repli en chargement complet si JS desactive.

Erreurs frequentes

  • Ne pas appeler preventDefault() avant intercept().
  • Ignorer event.signal pour annuler les requetes obsoletes.
  • Oublier les navigations de type 'traverse'.

Vérification

  1. Naviguez entre les routes, verifiez navigationType.
  2. Verifiez l'annulation des requetes via AbortSignal.

FAQ

Questions sur Generateur de snippets Navigation API Router

Difference avec History API?

L'API Navigation capture tous les types de navigation et fournit AbortSignal.

Peut-elle etre polyfill?

Non, pas de polyfill complet. Retombez sur History API.

Transitions de vue?

Encapsulez la mise a jour DOM dans startViewTransition().

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi