PathLocationStrategy vs HashLocationStrategy в веб-приложениях

Каковы преимущества и недостатки использования:

PathLocationStrategy - стиль "HTML 5 pushState" по умолчанию.
HashLocationStrategy - стиль "хэш-URL".

например, использование HashLocationStrategy предотвратит возможность прокрутки элемента по его #ID, но для некоторых сторонних плагинов для работы на сайтах ajax требуется HashLocationStrategy или Hashbang #!.

Я хотел бы знать, какой из них больше предлагает для webapp.

Ответ 1

Для меня основное отличие состоит в том, что для PathLocationStrategy требуется конфигурация на стороне сервера для всех путей, настроенных в @RouteConfig, для перенаправления на главную страницу HTML вашего приложения Angular2. В противном случае у вас будет 404 ошибки при попытке перезагрузить приложение в браузере или попытаться получить к нему доступ с использованием определенного URL-адреса.

Вот вопрос, который может дать вам несколько советов по этому поводу:

Когда я обновляю свой сайт, я получаю 404. Это с Angular2 и firebase.

Надеюсь, это поможет вам, Thierry

Ответ 2

# может обрабатываться только на клиенте, серверы просто игнорируют их. Это может вызвать проблемы с поисковыми системами (SEO), перенаправление может привести к избыточным перезагрузкам страниц. На этой странице https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling есть подробное объяснение, в то время как некоторые аргументы не применяются к приложениям Angular (например - не работа с отключенным JS).

"Недостаток" pushstate для HTML5 - это то, что требуется поддержка сервера, как объяснил Тьерри.

Ответ 3

Когда маршрутизатор переходит к новому представлению компонента, он обновляет местоположение и историю браузера с помощью URL-адреса для этого представления. Это строго локальный URL. Браузер не должен отправлять этот URL-адрес на сервер и не должен перезагружать страницу.

PathLocationStrategy

Современные браузеры HTML5 поддерживают history.pushState, метод, который изменяет местоположение и историю браузера, не вызывая запрос страницы сервера. Маршрутизатор может составить "естественный" URL, который неотличим от URL, который в противном случае потребовал бы загрузки страницы.

Вот URL-адрес в стиле HTML5 pushState, который перенаправляет на компонент xyz: localhost:4200/xyz/

HashLocationStrategy

Старые браузеры отправляют запросы страниц на сервер, когда URL-адрес местоположения изменяется, если только это изменение не произойдет после # (называемого хешем). Маршрутизаторы могут использовать это исключение, составляя URL-адреса маршрутов в приложении с помощью хэшей.

Вот URL-адрес в стиле хэша, который направляет к компоненту xyz: localhost:4200/src/#/xyz/

Я хотел бы знать, какой из них предлагает больше для веб-приложения.

Почти все проекты Angular должны использовать стиль HTML5 по умолчанию:

Он создает URL-адреса, которые легче понять пользователям.
Это сохраняет возможность делать рендеринг на стороне сервера позже.

Рендеринг критических страниц на сервере - это метод, который может значительно улучшить восприятие реакции при первой загрузке приложения. Приложение, для которого в противном случае потребовалось бы десять или более секунд, может быть воспроизведено на сервере и доставлено на пользовательское устройство менее чем за секунду.

Этот параметр доступен только в том случае, если URL-адреса приложений выглядят как обычные веб-URL-адреса без хешей (#) в середине.

Придерживайтесь значения по умолчанию, если у вас нет веских причин прибегать к хеш-маршрутам.

Ответ 4

Согласно официальным документам: