問(wèn)題描述

我在看到j(luò)avascript高級(jí)程序設(shè)計(jì)(第三版)第492頁(yè)的時(shí)候,有個(gè)疑問(wèn)

當(dāng)我用了'假'URL以后,刷新了,會(huì)返回404錯(cuò)誤,除非我在Web服務(wù)器上有個(gè)真的這樣的鏈接,那用戶難免去刷新頁(yè)面,難道我真的要去搞一個(gè)真的文件對(duì)應(yīng)真的鏈接.那還要這個(gè)pushState()有什么用,豈不是很不方便嗎

問(wèn)題解答

pushState主要用在SPA應(yīng)用中, 回答題主的問(wèn)題:

出現(xiàn)404。這是因?yàn)镻ushState模式下的URL里面沒(méi)有#，瀏覽器會(huì)真的向服務(wù)端發(fā)起一個(gè)請(qǐng)求，而我們?cè)诜?wù)端并沒(méi)有對(duì)應(yīng)于這個(gè)路徑的資源。

但是并不需要在服務(wù)器上有一個(gè)真鏈接(會(huì)把人累死), 只需要更改一下服務(wù)器的配置, 讓不存在的頁(yè)面(404)重定向到根路由即可.

以Tomcat為例，配置非常簡(jiǎn)單，只要在你的項(xiàng)目的web.xml里面加上以下配置就可以了：

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

這樣一來(lái)，對(duì)于找不到資源的路徑，Tomcat會(huì)全部重定向到根路徑上去，這樣你的前端框架不論是angular/vue/react/backbone 就可以在前端自己處理請(qǐng)求的URL了。

對(duì)于其它類型的服務(wù)端，例如nginx/apache/IIS，請(qǐng)參考這篇文檔：https://github.com/angular-ui...

來(lái)源: https://my.oschina.net/mumu/b...

按刷新會(huì)以當(dāng)前瀏覽器的url發(fā)請(qǐng)求到服務(wù)器。

例如你通過(guò)pushState()把當(dāng)前地址變成 boomshaklaka.com/boom點(diǎn)刷新后服務(wù)器收到這個(gè)地址發(fā)現(xiàn)不存在會(huì)返回404的。

首先你要理解前端路由跟后端路由的區(qū)別。

在只有后端路由的情況下，你請(qǐng)求的所有頁(yè)面都是由后端返回給你的，這時(shí)所有路由都是由后端控制。

但有時(shí)侯我們不希望刷新頁(yè)面，但url也想它改變，比如SPA應(yīng)用。這時(shí)候我們就需要一個(gè)前端路由，這個(gè)pushState在這就起這個(gè)作用。

首先我還是習(xí)慣后臺(tái)處理路由, 我就以后臺(tái)路由舉例子:

首先url 可以任意去定義, 至于你想關(guān)聯(lián)項(xiàng)目中的哪個(gè)文件, 任意

<action name='index'> <result>xxx/index.jsp</result></action><action name='login'> <result>xxx/index.jsp</result></action>

可以由不同的action指向同一個(gè)頁(yè)面, 所以你的網(wǎng)站要至少保證有一個(gè)頁(yè)面吧

其次:

在 HTML 文件中, history.pushState() 方法向?yàn)g覽器歷史添加了一個(gè)狀態(tài)。

更多是用來(lái)設(shè)置一個(gè)錨點(diǎn):

window.location = '#foo';

至于文中說(shuō)的404還是因?yàn)槁酚傻闹赶蛴袉?wèn)題, 沒(méi)有找到資源.