o "rooteamento" será disparado no evento
o "rooteamento" será disparado no eventoclick
click
a "rota" será um valor no atributo
a "rota" será um valor no atributodata-value=""
no botãodata-value=""
no botãoum "contêiner" irá servir para mostrar o conteúdo carregado
um "contêiner" irá servir para mostrar o conteúdo carregado<div id="container"></div> <button type="button" data-value="pagina1.html" class="navigate">Carregar pagina1.html</button> <button type="button" data-value="pagina2.html" class="navigate">Carregar pagina2.html</button> <button type="button" data-value="pagina3.html" class="navigate">Carregar pagina3.html</button> <script> $('.navigate ').on('click', function() { let target = $(this).attr('data-value') $('#container').load(target, function() { history.pushState(target, "", "/") }) }) window.addEventListener("popstate", function(evt) { if ( evt.state ) { $('#container').load(evt.state) } else { $('#container').html('') } }, false) </script>
- ao retornar ao estado padrão do histórico (null) o contêiner é limpo
EXEMPLO
<body>
<div id="container"></div>
<button type="button" data-value="pagina1.html" class="navigate">Carregar pagina1.html</button>
<button type="button" data-value="pagina2.html" class="navigate">Carregar pagina2.html</button>
<button type="button" data-value="pagina3.html" class="navigate">Carregar pagina3.html</button>
<script src="path/to/jequery.js"></script>
<script>
$('.navigate ').on('click', function() {
let target = $(this).attr('data-value')
$('#container').load(target, function() {
history.pushState(target, "", "/")
})
})
window.addEventListener("popstate", function(evt) {
if ( evt.state ) {
$('#container').load(evt.state)
} else {
$('#container').html('')
}
}, false)
</script>
</body>
Nas páginas um simples <h1>
indicando em qual página esta...você poderá navegar no histórico a "frente" e de "volta".
O estado inicial do histórico é null
, ao chegar no estado inicial (caso de retornar) apenas exiba sua interface padrão.