Olá /casa /sobre /galeria /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.
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.
