AngularJS HTML5 模式在手动 url 更改时重新加载整页
AngularJS HTML5 mode does a full page reload on manual url change
我正在使用 AngularJS 和 ui.router。我已经看到 Hashbang 和 HTML5 模式下的行为差异,我想知道它是否可以是 changed/prevented。
使用
时
$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 模式下手动更改 url 时让我的页面不重新加载?
谢谢
这里没有问题。这是浏览器的预期行为。使用哈希时,阻止重新加载的事实是您正在请求同一页面内的一个部分(id 等于哈希的元素)(因此无需重新加载)。如果 URL 发生变化,浏览器只能认为这是一个新页面。
当你点击一个页面时,angular会拦截点击并相应地改变地址栏中的URL。
我正在使用 AngularJS 和 ui.router。我已经看到 Hashbang 和 HTML5 模式下的行为差异,我想知道它是否可以是 changed/prevented。
使用
$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 模式下手动更改 url 时让我的页面不重新加载?
谢谢
这里没有问题。这是浏览器的预期行为。使用哈希时,阻止重新加载的事实是您正在请求同一页面内的一个部分(id 等于哈希的元素)(因此无需重新加载)。如果 URL 发生变化,浏览器只能认为这是一个新页面。
当你点击一个页面时,angular会拦截点击并相应地改变地址栏中的URL。