點燈坊

戦わなければ、勝てない

Hash Mode vs. HTML 5 Mode

Sam Xiao's Avatar 2024-02-28

當切換 URL 時，Vue Router 會避免對 Server 發出 Request ，直接由 JavaScript 去 render HTML，在 HTML 5 之前會使用 Hash Mode，現在會使用 HTML 5 Mode。

Version

Vue 3.4
Vue Router 4.2

Hash Mode

https://my-website/#
https://my-website/#/posts
https://my-website/#/posts/1
  • Hash Mode 的 url 在 root route 之後都會加上 #
  • 原本 # 是用在同一個 page 跳轉，並不會送到 server，Vue Router 用此特性將 # 加以攔截，由 JavaSript 去 render HTML，瀏覽器只會將 # 之前往 server 送

HTML 5 Mode

https://my-website/
https://my-website/posts
https://my-website/posts/1
  • HTML 5 Mode 的 url 在 root route 之後不必加上 #，如同 MPA 一樣
  • HTML 5 Mode 使用 HTML 5 的 History API 實作，可攔截 root route 之後的 url 不送到 server，但只適用支援 HTML 5 的瀏覽器

優缺點比較

  • URL 可讀性
    • Hash Mode：必須在 url 加上 # 比較奇特
    • HTML 5 Mode：如同 MPA 的 url 一樣
  • 404
    • Hash Mode：瀏覽器認識 #，儘管重整也是刷新 index.html 而已， 不會有 404 錯誤
    • HTML 5 Mode：重整後瀏覽器會對 server 發出 request，造成 404 錯誤，必須為 Web Server 動手腳，若 404 時回傳 index.html

Nginx

nginx.conf

location / {
  try_files $uri $uri/ /index.html;
}
  • 若找不到指定的 url，則回傳 index.html

Conclusion

  • 也有文件稱 HTML 5 Mode 為 History Mode，因為使用了 HTML 5 的 History Api
  • 由於各瀏覽器都已經支援 HTML 5，目前都是使用 HTML 5 Mode

# Vue # Vue Router