Empezar

La configuración del enrutamiento no requiere un archivo de configuración de ruta, un marco contenedor o una herramienta de compilación. Una aplicación pequeña se puede enrutar completamente con etiquetas HTML, y una aplicación más grande puede mover cada vista a archivos de ruta diferidos HTML o JavaScript.

Construyamos un panel simple de múltiples pestañas paso a paso:

Paso 1: agregue los scripts

Importe los scripts necesarios. Router se basa en @beforesemicolon/web-component para el comportamiento del elemento personalizado subyacente:

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

Paso 2: declarar enlaces de navegación

Cree enlaces de navegación utilizando la etiqueta <page-link>. Utilice el atributo path para apuntar a URL específicas y title para especificar el título del documento:

<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>

Paso 3: definir rutas de página

Envuelva las vistas de su página dentro de las etiquetas <page-route>. El contenido de estos elementos solo se mostrará cuando el nombre de ruta del navegador coincida con su atributo 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>

Paso 4: Manejar 404 y redirecciones

Para redirigir a los usuarios cuando navegan a una URL no registrada o no válida, defina una ruta 404 y una <page-redirect> al final de su lista de enrutamiento:

<!-- 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>

Próximos pasos

Ahora que tiene un diseño de enrutamiento básico, puede explorar:

• Guía y mejores prácticas para estructura de rutas, redirecciones, protecciones y convenciones de producción.
• Ruta de la página para representar parámetros, vistas anidadas, estados de carga y archivos de ruta diferida.
• API de navegación para navegar mediante programación dentro de JavaScript.
• Route Guards para proteger páginas con comprobaciones de sincronización o asíncrono.