問題描述

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

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

問題解答

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

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

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

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

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

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

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

來源: https://my.oschina.net/mumu/b...

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

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

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

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

但有時(shí)侯我們不希望刷新頁面，但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è)頁面, 所以你的網(wǎng)站要至少保證有一個(gè)頁面吧

其次:

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

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

window.location = '#foo';

至于文中說的404還是因?yàn)槁酚傻闹赶蛴袉栴}, 沒有找到資源.