Primeiros Passos

Configurar o roteamento não exige um arquivo de configuração de rotas, um framework de integração ou uma ferramenta de build. Uma aplicação pequena pode ser totalmente roteada com tags HTML, enquanto uma aplicação maior pode mover cada visualização para arquivos HTML ou JavaScript carregados sob demanda.

Vamos criar um painel simples com várias abas, passo a passo:

Passo 1: adicione os scripts

Importe os scripts necessários. O Router usa @beforesemicolon/web-component para o comportamento base dos elementos personalizados:

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

Passo 2: declare os links de navegação

Crie links de navegação usando a tag <page-link>. Use o atributo path para apontar para URLs específicas e title para definir o título do 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>

Passo 3: defina as rotas de página

Coloque as visualizações das páginas dentro de tags <page-route>. O conteúdo desses elementos só será renderizado quando o caminho do navegador corresponder ao 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>

Passo 4: trate páginas 404 e redirecionamentos

Para redirecionar usuários que acessarem uma URL inválida ou não registrada, defina uma rota 404 e um <page-redirect> no fim da lista de rotas:

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

Agora que você tem uma estrutura básica de roteamento, explore:

• Guia e Boas Práticas para estrutura de rotas, redirecionamentos, guards e convenções de produção.
• Page Route para renderizar parâmetros, visualizações aninhadas, estados de carregamento e arquivos de rota lazy.
• APIs de Navegação para navegar programaticamente com JavaScript.
• Route Guards para proteger páginas com verificações síncronas ou assíncronas.