Angular路由中URL包含#!而不是#

Question

最近我注意到，在AngularJS应用程序中使用ngRoute模块时，路由在URL中包含#!，这以前只有#。

例如，www.webiste.com/#/login变成了www.website.com/#!/login

我需要使用以下代码启用html5Mode，并禁用requireBase，从而完全删除基础内容：

$locationProvider.html5Mode({
       enabled: true,
       requireBase: false
});

网址更改为www.website.com/login，这个没问题，但会误导用户，因为这不是Angular SPA的URL形式。

如果我没有启用html5Mode，则URL会被编码，我无法绕过它。所以www.website.com/#/login变成了www.website.com/#!/#%2Flogin（注意后面的/被编码为%2F）。

这是开发人员为了某些特定目的而实施的更改吗？这有什么区别？我需要对我的应用程序进行哪些更改才能使其正常工作？我做错了什么吗？

Github问题链接：https://github.com/angular/angular.js/issues/15547

- Samarth Agarwal

---

在 URL 中使用哈希标识符违背了启用 html5Mode 的初衷...那么你为什么还在使用哈希标识符呢？至于哈希前缀，请阅读相关文档。 - charlietfl

在路由中的某个地方（可能是在app.js文件中），你设置了前缀，像这样"$locationProvider.hashPrefix('!');"。请移除 "!" 符号。 - Naghaveer R

我没有在任何地方设置类似的东西。我启用了 html5Mode 来消除 URL 中 /（斜杠）的编码。 - Samarth Agarwal

请查看 AngularJS指南-迁移-aa0077e8。这是在AngularJS 1.6中引入的重大变更。 - georgeawg

Answer 1

它被称为哈希符号。Twitter 曾经也使用它，它可以允许 AJAX 调用，并且可以让搜索引擎知道您的路径，而不必使用“真实”路径。但是它现在被认为已经过时。https://developers.google.com/webmasters/ajax-crawling/docs/getting-started。关于这个问题，还有一个 Stack Overflow 的答案：Doing links like Twitter, Hash-Bang #! URL's。

---

更新：不再需要哈希符号的原因之一是我们可以在不重新加载页面的情况下 推送历史状态。像 React 这样所谓的“单页”网站就是这种情况。

- Alexis Wilke

---

为什么我突然面临这些问题？我已经在小型Angular应用上工作了一年，从未遇到过这些问题。对我来说，“#”运行良好。旧的应用程序仍然正常工作，但每次创建新应用程序时都会出现问题。 - Samarth Agarwal

“www.website.com/login” 可能是您想要的，以使其更加友好于搜索引擎。但我不太确定为什么会突然添加感叹号（!）。您最近更新了版本吗？也许可以尝试从头开始创建一个小样本，以确保它默认情况下会这样做？ - Alexis Wilke

是的，先生，我也尝试过了。看起来是模块的更新。 - Samarth Agarwal

那么我建议在他们的错误列表中发布一篇帖子，首先搜索一下是否有其他人在抱怨。话虽如此，如果你希望页面被Google索引（尽管登录页面并不重要，但其他页面是），我认为感叹号是必要的。 - Alexis Wilke

确切地说，我可能希望在Angular的SPA之外的/login加载完全不同的页面，但现在似乎做不到。 - Samarth Agarwal