Usando roteador de baunilha você reduz dependências em estruturas (Ei, eu conheci muitas pessoas que queriam criar seu próprio roteador por vários motivos. Afinal, você pesquisou este tutorial do vanilla js router ... isso significa que você está procurando criar um!)

Criando seu próprio roteador em vanilla JavaScript é relativamente fácil, desde que você entenda todas as partes separadas envolvidas na criação de um roteador vanilla.

Peças-chave: Aqui estão as principais coisas sobre como fazer o seu próprio js router:

  1. A chave para o roteamento vanilla js é location.pathname propriedade.
  2. Ouvindo "popstate"evento para responder.nome do caminho alterar. Isso acontece sempre que um novo URL é digitado na barra de endereços do navegador, mas não queremos atualizar a página, basta atualizar a exibição carregando novo conteúdo.
  3. Opcionalmente, você pode armazenar rotas em rotas[] array.
  4. Conhecimento de Expressões regulares do JavaScript (RegEx) para analisar o URL.
  5. Compreensão básica de história e e history.pushState (API de histórico do JavaScript) se você deseja integrar seu roteador à arquitetura nativa do navegador.

Uma rápida revisão da API de histórico do JavaScript

Eu já vi muitos roteador js baunilha tutoriais que não mencionam a API de histórico do JavaScript. Pena porque clicar no navegador Costas e frente botões tem tudo a ver com a navegação entre URLs no histórico de navegação. Você não pode falar sobre roteamento sem a API do histórico.

  1. history.back () igual a history.go (-1) ou quando o usuário clica Costas botão no navegador. Você pode usar qualquer um dos métodos para o mesmo efeito.
  2. history.forward () executa quando o usuário pressiona o navegador frente botão e é equivalente a history.go (1)
  3. ir() é similar a .costas() e frente() métodos, exceto que você pode especificar quantas etapas para trás ou para frente você deseja seguir na pilha de histórico do navegador.
  4. pushState () enviará um novo estado à API do histórico.
  5. .comprimento propriedade é o número de elementos no histórico da sessão.
  6. .Estado A propriedade é usada para procurar o estado sem ouvir "popstate" evento.

Ok, vamos começar com a nossa própria implementação de roteador vanilla js!

Vou simplesmente despejar o mínimo HTML, CSS e Javascript carregado com comentários.

Configuração do roteador Vanilla JS baseado em API do histórico

Vamos examinar o código mínimo necessário para criar um alternador de URL (sem atualizar a página) e depois mostrarei um GIF de como tudo funciona.

            Olá                                
            
/casa
            
/sobre
                        
/contato
            
/Socorro
        
        
Carregamento de conteúdo ...

No centro, há uma chamada para window.history.pushState({Eu iria}, $ {Eu iria}, / page / $ {Eu iria});

O primeiro parâmetro é um ID de estado exclusivo. O segundo é o texto do título da guia. Finalmente, o terceiro parâmetro é o que você deseja que sua barra de endereço mude. Novamente, é isso que faz o navegador alterar o URL sem recarregar a página.

Os resultados. Agora, sempre que clicar em um botão, o URL será realmente alterado na barra de endereços do navegador. A caixa de conteúdo também é atualizada.

Você pode bifurque-se do meu GitHub (router.html) no meu biblioteca vanilla js.

routing
Nosso roteador vanilla JS em ação. Observe que toda vez que um botão é clicado, history.pushState é acionado. Simplesmente passamos o ID do elemento clicado armazenado no atributo id do elemento: casa, sobre, galeria, etc. Eles devem coincidir com a página real para a qual você deseja navegar. Obviamente, essa não é a única maneira de armazenar nomes de páginas, você pode usar uma matriz[] por exemplo, ou de qualquer outra maneira. É assim que foi feito neste exemplo.

Obviamente, também precisamos carregar o conteúdo do servidor consultando layouts e recursos para esse local. Isso depende da sua aplicação. Pode ser qualquer coisa.

Fazendo os botões Voltar e Avançar funcionarem

Usando history.pushState você fará automaticamente Costas e frente Os botões navegam para um estado anterior ou seguinte. Fazendo isso produz popstate evento. Esta é a parte em que você deve atualizar sua visualização novamente. (A primeira vez foi quando clicamos no botão.) Mas como o evento carrega um Eu iria do que foi clicado, é fácil atualizar a visualização e recarregar o conteúdo quando Costas ou frente são clicados:

Não estamos usando React ou Vue aqui, portanto, no meu código-fonte load_content cuidará de atualizar a visualização diretamente no DOM. É provável que esta área seja preenchida com algum conteúdo carregado da sua API. Como isso é apenas a parte dianteira Por exemplo, não há muito que eu possa fazer para mostrar como fazer isso. Mas é assim que funciona lado do cliente.

Carregamento inicial do roteador do lado do servidor

É necessário mais uma etapa para juntar tudo. No meu exemplo, eu simplesmente usei router.html. Quando você carrega esse roteador pela primeira vez em um PWA, precisa garantir que ele funcione, digamos./ página / home foi inserido diretamente na barra de endereço.

Até agora, alteramos o endereço do roteador apenas do a parte dianteira. Supõe-se que toda vez que você navegar para o URL que aparece nos botões do roteador, ele será carregado individualmente do servidor.

Portanto, é sua responsabilidade garantir./ página / sobre por exemplo, carregará o roteador e o conteúdo associado./ página / sobre na visualização raiz de alguns tipos. (E também realce o botão / guia “atual”.)

Depois de implementar essa parte, seu roteador estará completo. Como você escolhe recarregar o conteúdo em #conteúdo O elemento depende inteiramente de você e do seu design de back-end.

Deseja mais vantagens do JavaScript?

Você pode Siga me no twitter para obter atualizações sobre meus tutoriais de codificação gratuitos ou basta verificar esta página com 📚 meus livros de codificação em JavaScript e CSS, se você precisar de uma cópia.

alguma coisa