с использованием 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
Спасибо за прочтение
- 👏 Пожалуйста, хлопайте в историю и подписывайтесь на меня 👉
- 📰 Посмотреть больше материалов на Интервью по кодированию и проектированию систем
- 🔔 Подпишитесь на меня: LinkedIn!
Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями