【问题标题】：PathLocationStrategy vs HashLocationStrategy in web appsWeb 应用程序中的 PathLocationStrategy 与 HashLocationStrategy
【发布时间】：2016-04-14 16:30:57
【问题描述】：

使用有什么优缺点：

PathLocationStrategy - 默认的“HTML 5 pushState”样式。
HashLocationStrategy - “哈希 URL” 样式。

例如，使用 HashLocationStrategy 将阻止通过其#ID 滚动到元素的功能，但一些 3rd 方插件需要 HashLocationStrategy 或 Hashbang #! 以便在 ajax 网站中工作。

我想知道哪一个为 web 应用提供了更多功能。

【问题讨论】：

标签： url web-applications angular hashbang angular2-routing

【解决方案1】：

据官方docs：

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

路径位置策略

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

以下是路由到xyz 组件的HTML5 pushState 样式网址：localhost:4200/xyz/

哈希位置策略

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

这是一个路由到xyz 组件的 hash 样式 URL：localhost:4200/src/#/xyz/

我想知道哪一个为 web 应用提供了更多功能。

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

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

在服务器上呈现关键页面是一种可以在应用首次加载时显着提高感知响应能力的技术。原本需要十秒或更长时间才能启动的应用可以在服务器上呈现并在不到一秒的时间内交付到用户的设备。

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

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

【讨论】：

【解决方案2】：

# 只能在客户端处理，服务器忽略它们。这可能会导致搜索引擎 (SEO) 出现问题，重定向可能会导致多余的页面重新加载。这个页面https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling 有一些详细的解释，而一些参数不适用于 Angular 应用程序（例如 - 不适用于禁用 JS）。

HTML5 pushstate 的“缺点”是需要服务器支持，就像 Thierry 解释的那样。

【讨论】：

【解决方案3】：

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

这里有一个问题可以给你一些提示：

When I refresh my website I get a 404. This is with Angular2 and firebase。

希望对你有帮助蒂埃里

【讨论】：

对不起，这个答案完全没有抓住重点。它没有说明设置额外的服务器端渲染和缓存（同构渲染）的可能性以及这带来了多少好处。无需评估技术，您只需描述您遇到的问题的解决方案。