1.hash
hash 雖然出現在 URL 中,但不會被包括在 HTTP 請求中,對后端完全沒有影響,因此改變 hash 不會重新加載頁面。
hash
模式下,僅 hash
符號之前的內容會被包含在請求中,如 http://www.npc.com
,因此對於后端來說,即使沒有做到對路由的全覆蓋,也不會返回 404 錯誤。
hash
設置的新值必須與原來不一樣才會觸發動作將記錄添加到棧中。
hash
只可修改 #
后面的部分,因此只能設置與當前 URL 同文檔的 URL。
hash
只可添加短字符串。
2.history(服務器環境下才有效果)
pushState()
設置的新 URL 可以是與當前 URL 同源的任意 URL;;pushState()
設置的新 URL 可以與當前 URL 一模一樣,這樣也會把記錄添加到棧中;pushState()
通過stateObject
參數可以添加任意類型的數據到記錄中;;pushState()
可額外設置title
屬性供后續使用。
利用了 HTML5 History Interface 中新增的 pushState()
和 replaceState()
方法。(需要特定瀏覽器支持)。
history
模式下,前端的 URL 必須和實際向后端發起請求的 URL 一致,如 http://www.abc.com/book/id
。如果后端缺少對 /book/id
的路由處理,將返回 404 錯誤。Vue-Router 官網里如此描述:“不過這種模式要玩好,還需要后台配置支持……所以呢,你要在服務端增加一個覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態資源,則應該返回同一個 index.html 頁面,這個頁面就是你 app 依賴的頁面。”