Neste artigo você vai aprender a atualizar barra de endereço com nova URL, sem recarregar e utilizando JavaScript
Fala programador(a), beleza? Bora aprender mais sobre manipulação de URL e também JavaScript!
Vamos precisar aprender alguns recursos, que não são tão novos em JS para atingir nosso objetivo
Primeiramente vamos acessar o objeto global window, que está presente em toda as aplicações de JavaScript
Em window temos acesso a history, que possui método que trabalham com a URL
E o que utilizaremos será o pushState
O método pushState precisa de alguns argumentos:
- state: texto ou objeto que está associado a nova URL estaremos adicionando;
- title: um título para a nova página;
- url: a nova URL que troca a atual, por exemplo, /produtos;
Com estes preenchidos o método vai fazer exatamente o que precisamos, mudar a URL atual para um nova, definida como parâmetro
Veja na prática a utilização de pushState:
window.history.pushState("Algum texto para o state", "Produtos", "/produtos");Agora teremos uma mudança de URL para /produtos
Onde o title será Produtos, e o state será o que definirmos como primeiro argumento
Note que o title em alguns navegadores ainda é ignorado, então pode ser que ele não seja alterado como esperamos
Conclusão
Neste artigo você aprendeu a como atualizar barra de endereço com nova URL com JavaScript
Utilizamos a função pushState, onde podemos passar uma nova URL
Que é alterada baseada no argumento que enviamos para a função, podemos também passar outros parâmetros como: state e title
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!