Commencer

La configuration du routage ne nécessite pas de fichier de configuration de route, de framework de wrapper ou d'outil de construction. Une petite application peut être entièrement acheminée avec les balises HTML, et une application plus grande peut déplacer chaque vue vers des fichiers de route paresseux HTML ou JavaScript.

Créons étape par étape un tableau de bord multi-onglets simple :

Étape 1 : ajouter les scripts

Importez les scripts requis. Le Router s'appuie sur @beforesemicolon/web-component pour le comportement de l'élément personnalisé sous-jacent :

<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>
<script src="https://unpkg.com/@beforesemicolon/router/dist/client.js"></script>

Étape 2 : déclarer les liens de navigation

Créez des liens de navigation à l'aide de la balise <page-link>. Utilisez l'attribut path pour pointer vers des URL spécifiques et title pour spécifier le titre du document :

<nav>
    <page-link path="/" title="Home Dashboard">Home</page-link>
    <page-link path="/todos" title="Todo Manager">Todos</page-link>
    <page-link path="/contact" title="Get in Touch">Contact</page-link>
</nav>

Étape 3 : Définir les itinéraires des pages

Enveloppez vos pages vues dans les balises <page-route>. Le contenu de ces éléments ne sera rendu que lorsque le chemin d'accès du navigateur correspond à leur attribut path :

<!-- Home Page -->
<page-route path="/">
    <h1>Welcome Home</h1>
    <p>This is the default dashboard view.</p>
</page-route>

<!-- Todo Page (exact path matching) -->
<page-route path="/todos">
    <h1>Your Todos</h1>
    <p>Manage your daily activities here.</p>
</page-route>

<!-- Contact Page -->
<page-route path="/contact">
    <h1>Contact Us</h1>
    <p>Send us an email at contact@example.com</p>
</page-route>

Étape 4 : Gérer les 404 et les redirections

Pour rediriger les utilisateurs lorsqu'ils accèdent à une URL non enregistrée ou invalide, définissez un itinéraire 404 et un <page-redirect> au bas de votre liste de routage :

<!-- 404 Fallback page -->
<page-route path="/404">
    <h1>404 - Page Not Found</h1>
</page-route>

<!-- Redirects any unknown paths to the 404 page -->
<page-redirect path="/404"></page-redirect>

Prochaines étapes

Maintenant que vous disposez d’une présentation de routage de base, vous pouvez explorer :

• Guide et bonnes pratiques pour la structure des itinéraires, les redirections, les gardes et les conventions de production.
• Page Route pour restituer les paramètres, les vues imbriquées, les états de chargement et les fichiers de route différée.
• API de navigation pour naviguer par programmation dans JavaScript.
• Route Guards pour sécuriser les pages avec des contrôles de synchronisation ou asynchrones.