Para añadir un nuevo estado (cambiar la URL visible) en la barra de direcciones del navegador sin cambiar de página, puedes utilizar la función pushState
del objeto history
de JavaScript.
Ese método es un poco peliagudo porque requiere recibir varios datos aparte de la url nueva que quieres meter en la barra de de direcciones.
Primero requiere un estado, que podrías guardar para almacenar datos de navegación, o un objeto vacío si no quieres guardar nada
var estado = { /* datos del estado que desees guardar */ };
Luego requiere título, que realmente no se usa para nada (es decir, no te cambia el title de la pestaña)
var titulo = '';
Luego necesitas la URL a la que quieres que se actualice la barra de direcciones
var nuevaUrl = '/nueva-url';
Con todo eso ya puedes cambiar la barra de direcciones con el método pushState del objeto history del navegador. Se hace así.
history.pushState(estado, titulo, nuevaUrl);
Por cierto, por si lo necesitas, cuando utilizas pushState
, el estado que especificas se puede recuperar posteriormente mediante el evento popstate
del objeto window
. Si requieres hacer eso o necesitas más información sobre este proceso te recomiendo ver el artículo del objeto history de Javascript.
Con esto podrás modificar la URL visible en la barra de direcciones sin recargar la página. Es una de las funcionalidades básicas con las que se hacen los sistemas de routing en Javascript.