面試題：VueRouter中的 hash 模式和 history 模式有什麼區別

面試題：VueRouter中的 hash 模式和 history 模式有什麼區別

hash模式

1. hash 模式的路由中帶有 # 號
2. hash 模式通過 window.onhashchange 方法監聽路由的修改
3. hash 模式在頁面重新整理的時候，傳送的請求 url 是不帶 # 後面的內容的
4. hash 模式可以相容部分低版本的瀏覽器
5. hash 模式打包後，直接在瀏覽器中開啟 /dist/index.html 可以正常的訪問（原因是第 3 條指出的原因）

history模式

1. history 模式是使用正常的 url 路徑顯示
2. history 模式通過 pushState 和 replaceState 方式修改路由改變
3. history 模式在頁面重新整理的時候，會請求當前位址列中完成的 url，這時需要伺服器對這個 url 有處理，如果沒有對應的檔案，需要返回 index.html
4. history 模式因為是使用的 HTML5 的新規範，所以不能相容低版本的瀏覽器
5. history 模式打包後，直接在瀏覽器中開啟 /dist/index.html 會報錯（原因是第 3 條指出的原因）

其他注意事向

1. 有些 App 的分享是不支援 # 的，所以不能使用 hash 模式

總結

區別	hash模式	history模式
位址列表現	帶著 # 號	標準的 url 格式，不帶 #
路由跳轉的實現	window.onhashchange 監聽 hash 的改變	pushState 或者 replaceState Api改變路由
頁面重新整理	請求的地址中不攜帶 # 後面的內容，所以不需要後端的配合，也不會出現 404	請求的是當前地址的完整路徑，需要伺服器做特殊處理，否則會出現 404
相容性	可以相容一些低版本的瀏覽器	不相容低版本瀏覽器