Web应用中的PathLocationStrategy与HashLocationStrategy

Question

使用的利弊是什么：

1. PathLocationStrategy - 默认的“HTML 5 pushState”样式。
2. HashLocationStrategy - “哈希网址”样式。

例如，使用 HashLocationStrategy 将阻止通过其#ID滚动到元素的功能，但某些第三方插件需要 HashLocationStrategy 或 Hashbang ＃！，以便在ajax网站上工作。

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

Answer 1

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

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

Answer 2

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

这是一个可以给你一些提示的问题：

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

希望它可以帮到你， 亨利

Answer 3

根据官方docs：

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

PathLocationStrategy

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

以下是 HTML5 pushState 样式的URL，该URL路由到xyz组件：localhost:4200/xyz/

HashLocationStrategy

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

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

  

我想知道哪个为Web应用程序提供了更多的东西。

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

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

在服务器上呈现关键页面是一项可以大大提高应用程序首次加载时的响应速度的技术。可能需要十秒或更长时间才能启动的应用程序可以在服务器上呈现并在不到一秒钟的时间内交付到用户的设备。

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

除非您有充分的理由求助于散列路由，否则请使用默认设置

。