En JavaScript, vous pouvez utiliser l'API history pour changer l'URL dans le navigateur sans recharger la page. Voici un exemple :
// Modifier l'URL sans rediriger
window.history.pushState({}, '', '/nouvelle-page');
// Vous pouvez également fournir des données supplémentaires relatives à l'état
window.history.pushState({page: 'nouvelle-page'}, '', '/nouvelle-page');Dans cet exemple, pushState(state, unused, url) est une méthode qui prend trois paramètres :
state : un objet d'état (state object) qui peut être n'importe quel objet. Cet objet est associé à l'entrée créée dans l'historique. Vous pouvez récupérer cet objet en utilisant history.state. Chaque fois que l'utilisateur navigue vers le nouvel état, un événement popstate est déclenché. La propriété state de l'événement contient une copie de l'objet passé en premier paramètre.
unused : le second paramètre existe pour des raisons historiques, mais n'est plus utilisé. Il est recommandé de passer une chaîne de caractères vide pour assurer la comptabilité.
url : une nouvelle URL (/nouvelle-url) qui est l'URL qui sera affichée dans la barre de navigation.
Vous pouvez également utiliser window.history.replaceState pour remplacer l'URL actuelle sans ajouter une nouvelle entrée dans l'historique :
window.history.replaceState({}, "Titre de la page", "/nouvelle-url");Ces méthodes sont utiles pour les applications à page unique (Single Page Applications) où vous voulez mettre à jour l'URL en fonction de l'état de l'application sans recharger la page.