Изменение URL без перезагрузки страницы

#javascript

Здравствуете. Наткнулся в инсте на изменение URL, но перезагрузка страницы не происходит.
Если скопировать URL в другое окно но инфа тоже загружается.

Полагаю это как то так происходит: при клике по ссылке, отменяю действие по умолчанию
копирую ее href в location.hash, а инфу подгружаю ajax'ом, а если браузер пользователя
не поддерживает location.hash, то просто не отменяю действие по умолчанию при клике
на ссылке, и человек по ней переходит.

Это предположение имеет место быть? или есть более лаконичные варианты?
    

Ответы

Ответ 1


    orange
    tomato




Вот минимальный код который требуется для создания клиентского роутера. К сожаления
в родной для SO песочнице он не будет работать, да и в браузере если подгружать из
локального фала, наверное тоже, но с сервером это работает.

Что в коде происходит - 


все ссылки приводящие к изменению url помечаются классом route или любым другим способом.
при загрузке js первым делом нужно выбрать все ссылки и подписать их на событие click.
в обработчике события click вызываем event.preventDefault() чтобы предотвратить поведение
по умолчанию, а именно срабатывание ссылки которое приведет к перезагрузки страницы.
с помощью History api помещаем данные о текущем пути и указываем тот самый url который
бы мы хотели увидеть в строке состояния. (1)
грузим при помощи ajax данные и отображаем их.
стоит понимать что url хоть и выглядят красиво-как настоящие, то есть без # шеш решетки,
на самом деле таковыми не являются. Если Вы зайдя на страницу http://localhost:8080
измените адрес на http://localhost:8080/orange, то все корректно отработает. Но зайдя
сразу на адрес http://localhost:8080/orange Вы получите ошибку 404, так как в реальности
такого адреса не существует. Для этого нужно чтобы сервер на абсолютно любой запрос
всегда отдавал страницу index.html. Тогда зайдя на адрес http://localhost:8080/orange
браузер код клиентского роутера, который в свою очередь распознает url и продолжит
работу в штатном режиме, собирая и загружая данные по заданным правилам. Стоит так
же понимать что именно клиентский роутер должен показывать страницу 404, так как только
он знает какие пити существуют, а какие нет.
ну и стоит добавить что в изоморфном приложение происходит почти все тоже самое за
исключением того что при заходе клиентская часть роутера отрабатывает на сервере и
в index.html помещается уже отрендеренная разметка.