Qu'est-ce que Router ?
@beforesemicolon/router est une solution de routage basée sur Web Component pour les applications monopage, les applications multipages et les sites hybrides qui souhaitent une navigation côté client sans adopter de routeur-cadre.
Il utilise des éléments personnalisés, de sorte que les routes vivent dans la même structure HTML que les vues qu'elles contrôlent. Vous pouvez commencer avec un balisage statique, ajouter des fichiers d'itinéraire paresseux à mesure que l'application se développe et accéder aux API JavaScript uniquement lorsque vous avez besoin de gardes, d'analyses, de navigation programmatique ou d'intégration de bundle.
Modèle d'exécution
Le routeur résout les activations de pages via un moteur de correspondance central :
- Single Matcher : L'URL est analysée et mise en correspondance une fois par événement de navigation.
- Gardes unifiées : Les gardes globales et spécifiques à un itinéraire s'exécutent exactement une fois pour chaque transition, évitant ainsi les contrôles redondants.
- Notifications chirurgicales : Seuls les éléments sensibles à l'itinéraire affectés par le changement d'URL sont notifiés, évitant ainsi les nouveaux rendus inutiles.
- Remontages en cache : Lorsqu'une route devient inactive, ses nœuds DOM sont détachés et conservés en mémoire. La navigation en arrière remonte instantanément le contenu mis en cache au lieu de le recréer.
Principales fonctionnalités
- Navigation déclarative : Modifiez les pages et mettez à jour les titres des documents via la balise
<page-link>. - Correspondance de chemin : Chargez des vues en ligne ou des fichiers de routage externes à l'aide de
<page-route>avec des paramètres dynamiques (par exemple,:id). - Rendu des paramètres de recherche : Réagissez proprement aux chaînes de requête d'URL à l'aide de
<page-route-query>. - Résolutions intelligentes : Configurez des emplacements par défaut ou des pages 404 fourre-tout à l'aide de
<page-redirect>. - Accessibilité des métadonnées : Accédez instantanément aux paramètres de chemin d'accès, aux valeurs de requête ou aux détails de la charge utile d'état à l'aide de
<page-data>. - Contrôle avancé : Sécurisez les itinéraires avec les Route Guards asynchrones, basculez entre les modes de routage History et Hash et intégrez-les aux regroupeurs de modules.