【Web】 — 前端 SPA 指的「不換頁」到底是什麼意思?
Jul 18, 2021
Single Page 代表永遠都在同一頁上面，但不是指說「網址列不能變」，而是不能去載入其他頁面，同時卻可以產生有換頁的錯覺，符合使用者的經驗。有沒有看起來很像換頁，但又不會真的換頁的方法？
有一種方式可以實現：
HashTag(在網址後面加個 #)
利用網址後面加上 #不會跳頁的方式來辨別現在在哪裡
舉例來說，原本是 index.html，「關於我」的頁面就是 index.html#about
但這樣子網址會變得很醜，而且跟其他人的網址都不一樣，會有 #出現。
那有沒有什麼辦法讓 hashtag 不見呢？
History API — pushState 去改變網址
利用 HTML5 提供的 History API，就可以用 JavaScript 來操作網址列。在換頁的時候利用 pushState 去改變網址，於是網址就變了，但卻不會真的去載入那個新的頁面。
呼叫 pushState() 與設定 window.location = "#" 是類似的，兩個都會去建立和啟用另一個和目前文件有關的歷史紀錄。前端 Router 背後是用 History API 實現的
當我們在實作 SPA 時，在前端的換頁使用了 pushState，讓我們可以利用 JavaScript 來更新網址列卻不會真的載入那個資源。
可是如果我們重新整理呢？那意思就變成是要直接去載入那個資源啊！
之所以從首頁進去會可以，是因為從首頁到「關於我」的頁面，我們只是用 pushState 去改變網址，從 / 改成 /about。
但如果我們直接在 /about 重新整理，就代表瀏覽器會發送 Request 去 /about 要資料，但伺服器實際上沒有這個檔案，所以會回傳 404 not found。
那要怎麼解決這個問題呢？
在 GitHub Pages 上面可以設定一個自訂的 404 page，你可以把這個 404 page 就設置成是你的 index.html，這樣無論網址是什麼，都會回傳到首頁。
可以參考這篇的步驟：Creating a custom 404 page for your GitHub Pages site
參考資料：
