с использованием History API (pushState или replaceState) или Location API (href или назначение или замена)

Использование API истории

  • Вы можете использовать history.pushState() или history.replaceState() для изменения URL-адреса в браузере.
  • Аргументы для обоих методов одинаковы, что позволяет передать настраиваемый сериализуемый объект state в качестве первого аргумента.
// Current URL: https://my-website.com/page_a
const nextURL = 'https://my-website.com/page_b';
const nextTitle = 'My new page title';
const nextState = { additionalInformation: 'Updated the URL with JS' };

// This will create a new entry in the browser's history, without reloading
window.history.pushState(nextState, nextTitle, nextURL);

// This will replace the current entry in the browser's history, without reloading
window.history.replaceState(nextState, nextTitle, nextURL);

Использование API местоположения

  • Он перезагружает страницу, но по-прежнему позволяет изменить текущий URL-адрес и может быть полезен при работе с устаревшими браузерами. Вы можете изменить URL-адрес, используя Window.location.href, location.assign() или location.replace():
// Current URL: https://my-website.com/page_a
const nextURL = 'https://my-website.com/page_b';

// This will create a new entry in the browser's history, reloading afterwards
window.location.href = nextURL;

// This will replace the current entry in the browser's history, reloading afterwards
window.location.assign(nextURL);

// This will replace the current entry in the browser's history, reloading afterwards
window.location.replace(nextURL);

Как видите, все три варианта вызовут перезагрузку страницы, что может быть нежелательно. В отличие от History API

Спасибо за прочтение

Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями