皇上,还记得我吗?我就是1999年那个Linux伊甸园啊-----24小时滚动更新开源资讯,全年无休!

Arch Linux 将逐步淘汰 i686 版本

开程序员的淘宝店!寻找开源技术服务伙伴!>>> »  

这是一个非常常见的PushState问题,经常有人来问。

大家都知道,Angular2的路由默认使用了HTML5的PushState模式,这样URL里面就没有#号了,彻底解放了一些强迫症患者。这样一来,URL是好看多了,但是也带来了另一个问题,那就是需要配置一下服务端才能支持HTML5的这种PushState路径。

例如,对于以下URL路径:

http://localhost:8080/NiceFish-Tomcat/posts/page/1

当你浏览器里面导航的时候,随意切换都没有问题,但是如果你按F5强制刷新,就会出现404。这是因为PushState模式下的URL里面没有#,浏览器会真的向服务端发起一个请求,而我们在服务端并没有对应于这个路径的资源。

所以,我们需要做一些配置来支持Angular的这种路由模式,以Tomcat为例,配置非常简单,只要在你的项目的web.xml里面加上以下配置就可以了:

    <error-page>
        <error-code>404</error-code>
        <location>/</location>
    </error-page>

这样一来,对于找不到资源的路径,Tomcat会全部重定向到根路径上去,这样Angular2就可以在前端自己处理请求的URL了。

对于其它类型的服务端,例如nginx/apache/IIS,请参考这篇文档:https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

分享到:更多 ()