Web 应用程序中的 PathLocationStrategy 与 HashLocationStrategy

PathLocationStrategy vs HashLocationStrategy in web apps

使用的优缺点是什么:

  1. PathLocationStrategy - 默认 "HTML 5 pushState" 样式。
  2. HashLocationStrategy - "hash URL" 样式。

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

我想知道哪一个提供更多的网络应用程序。

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

访问它时,您将遇到一些 404 错误。

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

  • .

希望对你有帮助, 蒂埃里

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

HTML5 pushstate 的 "disadvantage" 需要服务器支持,如 Thierry 所解释的那样。

根据官方docs

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

路径位置策略

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

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

HashLocationStrategy

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

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

I would like to know which one offers more for a webapp.

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

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

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

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

除非有令人信服的理由求助于哈希路由,否则请坚持使用默认设置。