javascript - 關於js高級程式中的問題

Question

我在看到javascript高階程式設計(第三版)第492頁的時候,有個疑問

#當我用了"假"URL以後,刷新了,會返回404錯誤,除非我在Web伺服器上有個真的這樣的連結,那用戶難免去刷新頁面,難道我真的要去搞一個真的檔案對應真的連結.那還要這個pushState()有什麼用,豈不是很不方便嗎

Answer 1

pushState主要用在SPA應用中, 回答題主的問題:

出現404。這是因為PushState模式下的URL裡面沒有#，瀏覽器會真的會向服務端發起一個請求，而我們在服務端並沒有對應到這個路徑的資源。

但是並不需要在伺服器上有一個真連結(會把人累死), 只需要更改一下伺服器的配置, 讓不存在的頁面(404)重定向到根路由即可.

以Tomcat為例，設定非常簡單，只要在你的專案的web.xml裡面加上以下設定就可以了：

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

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

對於其它類型的服務端，例如nginx/apache/IIS，請參考這篇文件：https://github.com/angular-ui...

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

Answer 2

按刷新會以目前瀏覽器的url發送請求到伺服器。

例如你透過pushState()把目前位址變成 boomshaklaka.com/boom
點刷新後伺服器收到這個位址發現不存在會回傳404的。

Answer 3

首先你要先理解前端路由跟後端路由的差別。

在只有後端路由的情況下，你要求的所有頁面都是由後端回傳給你的，這時所有路由都是由後端控制。

但有時侯我們不希望刷新頁面，但url也想它改變，例如SPA應用。這時候我們需要一個前端路由，這個pushState在這就扮演這個角色。

Answer 4

首先我還是習慣後台處理路由, 我就以後台路由舉例子:

首先url 可以任意去定義, 至於你想關聯項目中的哪個文件, 任意

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

可以由不同的action指向同一個頁面, 所以你的網站要至少保證有一個頁面吧

其次:

在 HTML 檔案中, history.pushState() 方法為瀏覽器歷史新增了一個狀態。

更多是用來設定一個錨點:

 window.location = "#foo";

至於文中說的404還是因為路由的指向有問題, 沒有找到資源.