如何使用 AngularJS HTML5mode 启用对 URL 哈希的导航？答案

【问题标题】：How to enable navigation to a URL's hash with AngularJS's HTML5mode?如何使用 AngularJS HTML5mode 启用对 URL 哈希的导航？
【发布时间】：2015-11-03 05:42:53
【问题描述】：

我在 AngularJS 应用程序中启用了 html5mode，因此我可以访问 URL 格式为 site.com/path 而不是 site.com/#/path 的路径。

但是在启用 html5mode 的情况下导航到散列不能正常工作。当我通过 Chrome 导航到 site.com/#hash 时，URL 会自动更改为 site.com/hash。由于hash 不是服务器上的资源，因此此 URL 会导致加载默认的 index.html 文件，而不是滚动到 hash 位置。

这似乎是一个非常微不足道的用例，但我怎样才能使 URL 格式 site.com/#hash 在 AngularJS 中按预期工作？

【问题讨论】：

去掉html5mode代码再试试
删除 html5mode 后，URL 需要为 site.com/#/#hash 才能使哈希生效，而不是 site.com/#hash
如果你添加#hash它不会产生任何问题，因为它只停留在客户端。你是否尝试使用chrome地址栏上的相同url直接点击
在 hashbang 模式下，如果我输入 URL site.com/#hash，Chrome 会将其更改为 site.com/#/hash。
然后启用html5mode然后尝试直接点击

标签： javascript angularjs html hash url-routing

【解决方案1】：

我在以下人员的帮助下让它工作：

这个 StackOverflow 问题：Can I reclaim control of the URL hash-fragment from AngularJS?
以及来自 AngularJS 文档的间接提示：https://docs.angularjs.org/error/$location/nobase

引用自文档页面：

请注意，在 IE9 中使用 $location 解析相对路径时，删除对标记的要求会产生不利的副作用。

总而言之，Angular 仅在以下情况下才会保留 URL 中的哈希片段：

html5模式已启用，
哈希前缀已设置，
并且您在启用 html5mode 时没有设置 requireBase:false

难怪人们很难掌握 AngularJS：文档薄弱，框架就像一个神奇的黑匣子，让你无法控制你的应用程序。

【讨论】：