Javascript — Как изменить текущий URL без перезагрузки страницы

HTML5 History API предоставляет pushState() и replaceState() методы, которые позволяют добавить и модифицировать записи истории без перезагрузки страницы.

Обратите внимание, что History API позволяет обновлять только URL адреса того же происхождения. Вы не можете использовать его для перехода на совершенно другой веб-сайт.

Метод pushState()

Этот метод обновляет URL-адрес и создает новую запись в истории браузера без перезагрузки страницы.

Как это работает:

history.pushState(state, title, url);

1. State — это объект, c данными, относящиеся к новому URL-адресу. Его можно получить с помощью свойства JavaScript history.state.
2. Title — это новый заголовок страницы, который должен отображать браузер. В большинстве случаев он полностью игнорируется браузером.
3. Url — это новый URL-адрес, который будет добавлен в историю браузера без перезагрузки страницы.

Пример использования:

history.pushState({
    id: 'home',
    source: 'web'
}, 'Блог веб разработчика', 'https://zalki-lab.ru');

Метод replaceState()

Еще один метод, который обновляет URL-адрес без перезагрузки страницы. Он работает точно так же, как pushState(), но изменяет существующую запись в истории браузера, а не добавляет новую.

В идеале вы должны использовать этот метод только тогда, когда вы хотите изменить URL-адрес, не оставив никаких следов в истории браузера.

Пример использования:

history.replaceState({
    id: 'home',
    source: 'web'
}, 'Блог веб разработчика =)', 'https://zalki-lab.ru');