【Vue】Vue-router中的history模式和hash模式

為了建構SPA（單頁面應用），Vue引入了前端路由Vue-Router，前端路由的核心就是在改變視圖的同時不會向後端發起請求。Vue-Router有兩種模式：hash模式和history模式。預設的路由模式是hash模式。

1. hash模式

簡介： hash模式是開發中預設的模式，它的URL帶着一個#，例如：​

​http://www.abc.com/#/vue​

​​，它的hash值就是​

​#/vue​

​。

特點：hash值會出現在URL裡面，但是不會出現在HTTP請求中，對後端完全沒有影響，是以改變hash值，不會重新加載頁面。這種模式的浏覽器支援度很好，低版本的IE浏覽器也支援這種模式。

hash路由被稱為是前端路由，已經成為SPA（單頁面應用）的标配。

原理： hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
}      

使用onhashchange()事件的好處就是，在頁面的hash值發生變化時，無需向後端發起請求，window就可以監聽事件的改變，并按規則加載相應的代碼。

除此之外，hash值變化對應的URL都會被浏覽器記錄下來，這樣浏覽器就能實作頁面的前進和後退。雖然是沒有請求後端伺服器，但是頁面的hash值和對應的URL關聯起來了。

2. history模式

簡介： history模式的URL中沒有#，它使用的是傳統的路由分發模式，即使用者在輸入一個URL時，伺服器會接收這個請求，并解析這個URL，然後做出相應的邏輯處理。

特點： 當使用history模式時，URL就像這樣：​

​http://abc.com/user/id​

​。相比hash模式更加好看。但是，history模式需要背景配置支援。如果背景沒有正确配置，通路時會傳回404。

API： history api可以分為兩大部分，切換曆史狀态和修改曆史狀态：

• 修改曆史狀态：包括了 HTML5 History Interface 中新增的​

  ​pushState()​

  ​​ 和​

  ​replaceState()​

  ​ 方法，這兩個方法應用于浏覽器的曆史記錄棧，提供了對曆史記錄進行修改的功能。隻是當他們進行修改時，雖然修改了url，但浏覽器不會立即向後端發送請求。如果要做到改變url但又不重新整理頁面的效果，就需要前端用上這兩個API。
• 切換曆史狀态：包括​

  ​forward()​

  ​​、​

  ​back()​

  ​​、​

  ​go()​

  ​三個方法，對應浏覽器的前進，後退，跳轉操作。

雖然history模式丢棄了醜陋的#。但是，它也有自己的缺點，就是在重新整理頁面的時候，如果沒有相應的路由或資源，就會刷出404來。

如果想要切換到history模式，就要進行以下配置（後端也要進行配置）：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})      

3. 兩種模式對比

• pushState() 設定的新 URL 可以是與目前 URL 同源的任意 URL；而 hash 隻可修改 # 後面的部分，是以隻能設定與目前 URL 同文檔的 URL；
• pushState() 設定的新 URL 可以與目前 URL 一模一樣，這樣也會把記錄添加到棧中；而 hash 設定的新值必須與原來不一樣才會觸發動作将記錄添加到棧中；
• pushState() 通過 stateObject 參數可以添加任意類型的資料到記錄中；而 hash 隻可添加短字元串；
• pushState() 可額外設定 title 屬性供後續使用。
• hash模式下，僅hash符号之前的url會被包含在請求中，後端如果沒有做到對路由的全覆寫，也不會傳回404錯誤；history模式下，前端的url必須和實際向後端發起請求的url一緻，如果沒有對用的路由處理，将傳回404錯誤。