O que é o Router?

@beforesemicolon/router é uma solução de roteamento baseada em Web Components para aplicações de página única, aplicações de várias páginas e sites híbridos que precisam de navegação no cliente sem adotar o roteador de um framework.

Ele usa elementos personalizados, então as rotas vivem na mesma estrutura HTML das visualizações que controlam. Você pode começar com marcação estática, adicionar arquivos de rota carregados sob demanda conforme a aplicação cresce e recorrer às APIs JavaScript somente quando precisar de guards, analytics, navegação programática ou integração com bundlers.

Modelo de execução

O roteador resolve a ativação das páginas por meio de um mecanismo central de correspondência:

• Matcher único: a URL é analisada e comparada uma vez por evento de navegação.
• Guards unificados: guards globais e específicos de rota executam exatamente uma vez em cada transição, evitando verificações redundantes.
• Notificações cirúrgicas: somente os elementos dependentes de rota afetados pela mudança de URL são notificados, evitando novas renderizações desnecessárias.
• Remontagens em cache: quando uma rota fica inativa, seus nós DOM são removidos e mantidos em memória. Voltar à rota remonta o conteúdo em cache instantaneamente, em vez de recriá-lo.

Principais recursos

• Navegação declarativa: altere páginas e atualize títulos do documento com a tag <page-link>.
• Correspondência de caminhos: carregue visualizações inline ou arquivos de rota externos usando <page-route> com parâmetros dinâmicos, como :id.
• Renderização por parâmetros de consulta: reaja de forma simples às consultas da URL com <page-route-query>.
• Fallbacks inteligentes: configure destinos padrão ou páginas 404 genéricas usando <page-redirect>.
• Acesso a metadados: acesse imediatamente parâmetros do caminho, valores de consulta e dados do payload de estado usando <page-data>.
• Controle avançado: proteja rotas com Route Guards assíncronos, alterne entre os modos History e Hash e integre com bundlers.