皇上,还记得我吗?我就是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

分享到:更多 ()