AngularJS HTML5 模式在手动 url 更改时重新加载整个页面

Question

我正在将 AngularJS 与 ui.router 一起使用。我已经看到 Hashbang 和 HTML5 模式的行为差异，我想知道它是否可以更改/防止。 使用时

$locationProvider.html5Mode(true);

当我手动更改地址栏中的 url 时，会重新加载整个页面。 例如，如果我当前在 url 上

http://example.com/post/5467777

并手动将其更改为

http://example.com/post/5464777

发生拉页面重新加载，然后加载正确的状态。

如果我不使用 HTML5 模式，则不会发生完整页面重新加载，而是在更改 url 时直接加载状态（当然这要快得多）

http://example.com/#/post/5467777

换一个。 我的 HTML5 模式的服务器端配置如下：

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.php [L]

我认为 AngularJS 也可以拦截这些 URL 更改。如果可能，如何在 HTML5 模式下手动更改网址时不重新加载页面？

谢谢

Answer 1

这里没有错。这是浏览器的预期行为。使用散列时，防止重新加载的事实是您在同一页面内请求一个部分（一个 id 等于散列的元素）（因此无需重新加载）。如果 URL 发生变化，浏览器只能认为这是一个新页面。

当你点击一个页面时，angular会拦截点击并相应改变地址栏中的URL。