Neste artigo você vai aprender a como trocar URL sem carregar nova página em JavaScript, utilizando uma simples abordagem
Fala programador(a), beleza? Bora aprender mais sobre URL em JavaScript!
Muitas vezes, precisamos trocar a URL atual do navegador sem carregar uma nova página.
Isso pode ser útil em aplicações web que usam rotas dinâmicas e queriam trocar a URL sem recarregar a página.
Em JavaScript, podemos trocar a URL do navegador usando o objeto history e o método pushState.
O método pushState adiciona uma nova entrada na pilha de histórico do navegador, permitindo que o usuário use o botão “Voltar” para retornar à página anterior.
Além disso, ele atualiza a URL atual do navegador sem recarregar a página.
Vamos ver um exemplo de como usar o método pushState para trocar a URL do navegador:
function updateUrl(newUrl) {
history.pushState(null, null, newUrl);
}
No exemplo acima, criamos uma função chamada updateUrl que recebe uma nova URL como parâmetro.
Em seguida, chamamos o método pushState passando null como o estado e o título e a nova URL como os parâmetros.
Para usar a função updateUrl, basta chamá-la passando a nova URL como parâmetro. Por exemplo:
updateUrl('https://www.example.com/page2');Isso vai atualizar a URL atual do navegador para https://www.example.com/page2 sem recarregar a página.
Usando o objeto window.location
Outra maneira de trocar a URL do navegador sem recarregar a página é usando o objeto window.location.
O objeto window.location contém informações sobre a URL atual do navegador e permite alterá-la usando as propriedades href, protocol, host, hostname, pathname, search e hash.
Vamos ver um exemplo de como usar o objeto window.location para trocar a URL do navegador:
function updateUrl(newUrl) {
window.location.href = newUrl;
}
No exemplo acima, criamos uma função chamada updateUrl que recebe uma nova URL como parâmetro. Em seguida, atribuímos a nova URL à propriedade href do objeto window.location.
Para usar a função updateUrl, basta chamá-la passando a nova URL como parâmetro. Por exemplo:
updateUrl('https://www.example.com/page2');
Isso vai atualizar a URL atual do navegador para https://www.example.com/page2 sem recarregar a página.
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Em resumo, existem várias maneiras de trocar a URL do navegador sem recarregar a página em JavaScript.
O método pushState e o objeto window.location são úteis para trocar a URL e permitir que o usuário volte para a página anterior usando o botão “Voltar”.
Já o método replace é útil para trocar a URL e remover a entrada atual da pilha de histórico do navegador.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!