Как сделать так, чтобы переходить между страницами без перезагрузки, но так чтобы url страницы менялся?

#javascript #html #css #url

Как сделать так, чтобы переходить между страницами без перезагрузки, но так чтобы
url страницы менялся?
    

Ответы

Ответ 1

В HTML документе метод history.pushState() добавляет новое состояние в историю браузера  

Метод pushState() принимает 3 параметра: state, title (который в данный момент игнорируется),
URL. Давайте рассмотрим каждый параметр подробнее:


  State — JavaScript объект, который связан с новой записью в истории браузера, созданной
при помощи pushState(). Всякий раз, когда пользователь перемещается на новое состояние
истории браузера при помощи таких функций, как, например history.back() или history.go(),
срабатывает событие popstate, а в объект event передаётся свойство state.   
  
  Title — в данный момент Firefox игнорирует данный параметр. Тем не менее аргумент
может передаваться. Передача пустой строки вместо title должна быть безопасной с учётом
будущих изменений метода. В качестве альтернативы можно передавать title в объекте
state и использовать его оттуда.  
  
  URL — URL новой записи в истории браузера передаётся в этом аргументе. Обратите
внимание, что браузер не будет пытаться загрузить данный URL после вызова pushState(),
но эту попытку можно сделать позднее, например, после перезапуска браузера. Новый URL
не обязательно должен быть абсолютным. Если он относительный, тогда он образуется от
текущего URL.


var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';

history.pushState(state, title, url);