Web应用中的PathLocationStrategy与HashLocationStrategy

Question

使用的利弊是什么:

1. PathLocationStrategy - 默认的"HTML 5 pushState"样式.
2. HashLocationStrategy - "哈希URL"样式.

例如,使用HashLocationStrategy将阻止通过其#ID滚动到元素的功能,但是某些第三方插件需要HashLocationStrategy或Hashbang #!为了在ajax网站上工作.

我想知道哪一个为webapp提供更多.

Answer 1

#只能在客户端上处理,服务器只是忽略它们.这可能会导致搜索引擎(SEO)出现问题,重定向会导致冗余页面重新加载.此页面https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling有一些详细的解释,而一些参数不为角度提出的申请(例如-不与JS工作禁用).

HTML5 pushstate的"劣势"是需要像Thierry所解释的服务器支持.

Answer 2

根据官方文档：

当路由器导航到新的组件视图时，它会使用该视图的 URL 更新浏览器的位置和历史记录。这是一个严格的本地 URL。浏览器不应将此 URL 发送到服务器，也不应重新加载页面。

路径位置策略

现代 HTML5 浏览器支持history.pushState，一种无需触发服务器页面请求即可更改浏览器位置和历史记录的技术。路由器可以组成一个“自然”的 URL，该 URL 与需要加载页面的 URL 没有区别。

这是路由到组件的HTML5 pushState样式 URL xyz：localhost:4200/xyz/

哈希位置策略

旧版浏览器会在位置 URL 更改时向服务器发送页面请求，除非更改发生在 a #（称为hash）之后。路由器可以通过使用散列组合应用程序内路由 URL 来利用此异常。

这是路由到组件的哈希样式 URL xyz：localhost:4200/src/#/xyz/

我想知道哪一个为 webapp 提供了更多。

几乎所有的 Angular 项目都应该使用默认的 HTML5 样式：

1. 它生成的 URL 更易于用户理解。
2. 它保留了稍后进行服务器端渲染的选项。

在服务器上呈现关键页面是一种技术，可以在应用程序首次加载时极大地提高感知响应能力。一个需要 10 秒或更长时间才能启动的应用程序可以在服务器上呈现并在不到一秒的时间内传送到用户的设备。

仅当应用程序 URL 看起来像中间没有哈希 (#) 的普通 Web URL 时，此选项才可用。

除非您有令人信服的理由诉诸散列路由，否则请坚持使用默认值。

Answer 3

对我而言，主要区别在于PathLocationStrategy需要在服务器端进行配置，@RouteConfig以配置要重定向到Angular2应用程序主HTML页面的所有路径。否则，当您尝试在浏览器中重新加载应用程序或尝试使用特定的URL访问应用程序时，将出现404错误。

这是一个可以为您提供一些提示的问题：

• 刷新网站时，我得到404。这是Angular2和firebase的。

希望对您有帮助，蒂埃里