為了構建SPA，vue引入了前端路由系統vue-router。
vue-route有兩種模式：history模式和hash模式。

1. hash模式（vue-router預設hash模式）

hash模式背後的原理是onhashchange事件。

window.onhashchange=function(){
 let hash=location.hash.slice(1);
 document.body.style.color=hash;
}

（localtion是js裡管理位址列的內建物件，是window物件的一部分，可通過window.localtion訪問，在w3cshool裡的詳細介紹

)
由於hash發生變化的url都會被瀏覽器記錄下來，使得瀏覽器的前進後退都可以使用了，儘管瀏覽器沒有親求伺服器，但是頁面狀態和url關聯起來。後來人們稱其為前端路由，成為單頁應用標配。

比如http://www.abc.com/#/index，hash值為#/index。hash模式的特點在於hash出現在url中，但是不會被包括在HTTP請求中，對後端沒有影響，不會重新載入頁面。

2.history模式

history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法。MDN相關介紹（需要特定瀏覽器支援）。這兩個方法應用於瀏覽器的歷史記錄棧，提供了對歷史記錄進行修改的功能。只是當他們進行修改時，雖然修改了url，但瀏覽器不會立即向後端傳送請求。

當使用history模式時，url就像正常的url,例如http://abc.com/user/id相比hash模式更加好看。特別注意，history模式需要後臺配置支援。如果後臺沒有正確配置，訪問時會返回404。
通過history api，我們丟棄了醜陋的#，但是有一個缺點，當重新整理時，如果伺服器中沒有相應的相應或者資源，會分分鐘刷出一個404來（重新整理需要請求伺服器）。所以history模式不怕前進，不怕後退，就怕重新整理。

3.hash模式和history模式對比

• pushState()設定新的url可以是和當前url**同源的任意url;hash只可修改#後面的部分，只能設定當前url
  同文檔**的url。
• pushState()設定的新url可與當前url一致，這樣也會把記錄新增到棧中；hash必須設定與當前url不同的url的，才會觸發動作將記錄新增到棧中。
• pushState()通過stateObject引數可以新增任意型別的資料到記錄中；hash只可新增短字串。
• pushState()可額外設定title屬性供後續使用。

不過，hash模式也有比history模式優勢的地方。

• hash模式下，僅hash符號之前的url會被包含在請求中，後端如果沒有做到對路由的全覆蓋，也不會返回404錯誤。
• history模式下，前端的url必須和實際向後端發起請求的url一致，如http://abc.com/user/id,後端如果沒有對user/id的路由處理，將返回404錯誤。
  history模式官方文件

4.應用場景

對於一般的Vue+Vue-router+Webpack+XXX形式1的Web開發場景，用history模式即可，後端用Apach或Nginx進行路由的簡單配置，同時搭配前端路由的404頁面支援。

相關文章