PathLocationStrategy vs HashLocationStrategy в веб-приложениях
Каковы преимущества и недостатки использования:
- PathLocationStrategy - стиль "HTML 5 pushState" по умолчанию.
- HashLocationStrategy - стиль "хэш-URL".
например, использование HashLocationStrategy предотвратит возможность прокрутки элемента по его #ID, но для некоторых сторонних плагинов для работы на сайтах ajax требуется HashLocationStrategy или Hashbang #!.
Я хотел бы знать, какой из них больше предлагает для webapp.
Ответы
Ответ 1
Для меня основное отличие состоит в том, что для PathLocationStrategy
требуется конфигурация на стороне сервера для всех путей, настроенных в @RouteConfig
, для перенаправления на главную страницу HTML вашего приложения Angular2. В противном случае у вас будет 404 ошибки при попытке перезагрузить приложение в браузере или попытаться получить к нему доступ с использованием определенного URL-адреса.
Вот вопрос, который может дать вам несколько советов по этому поводу:
Надеюсь, это поможет вам,
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
Согласно официальным документам:
Когда маршрутизатор переходит к новому представлению компонента, он обновляет местоположение и историю браузера с помощью 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-адреса без хешей (#) в середине.
Придерживайтесь значения по умолчанию, если у вас нет веских причин прибегать к хеш-маршрутам.