【前端開發】如何使用 JavaScript 進行頁面的轉址？
在前端開發中，很常會有需要轉址的需求，且處理的手法滿因人而異的，所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式，以及各自的差異。
以下作法建立在瀏覽器上全域物件 Window 底下 Location 的物件，這個物件提供了有關當前網頁的相關資訊，例如 URL、主機、路徑和查詢參數等，由於這篇文章的主旨並不是針對 Location 物件做討論，所以不會針對其底下的屬性一一介紹。
接著就讓我們來看看在開發實務上會有哪些常用的轉址方式吧！
window.location.href
window.location.href 是最常見的轉址方式， href 是 location 底下的一個屬性，我們會透過賦值給這個屬性來做到轉址且將這個變化加入到歷史紀錄中，這樣使用者在切換頁面時，就可以透過上下一步找到此頁面：
window.location.href = 'https://www.ccc.ooo';
window.location.assign()
如果覺得 window.location.href 長得醜醜的， window.location.assign() 方法一樣可以透過帶入路徑參數來做到轉址：
window.location.assign('https://www.ccc.ooo');
這個方法與 window.location.href 最大的差異是，今天萬一導向的是不同網域的頁面且觸發的該網域的資安防護， window.location.assign() 會拋出 SECURITY_ERROR 的錯誤訊息，做到更好的錯誤管理（雖然我目前還沒有確切遇到過）。
window.location.replace()
在有些情境下，使用者可能不小心進入邊緣情境，例如：根本沒有這個路徑。
此時我們可能會希望幫使用者做「重新導向」，一旦進入到指定頁面，我們把它轉向至首頁或是其他用來防呆用的頁面，且重新導向的過程中，該路徑不會被加入歷史紀錄，使用者就不會透過點擊上下一頁按鈕，而再次進入到錯誤的頁面中：
// 假設使用者不小心進入 <https://www.ccc.ooo/dsfsf>
// 我們使用 window.location.replace() 將頁面重新導向至 <https://www.ccc.ooo>
// <https://www.ccc.ooo/dsfsf> 將不會出現在歷史紀錄中
window.location.repalce('https://www.ccc.ooo');
與 window.location.assign() 相同的是：今天萬一導向的是不同網域的頁面且觸發的該網域的資安防護， window.location.replace() 會拋出 SECURITY_ERROR 的錯誤訊息。
小結
同樣都是透過 Location 物件來進行轉址，但能得到的結果與使用者體驗大不同，如果只是普通的靜態頁面也許用上述的這幾種方式都不會差去哪，但如果有一些 HTTP Request 、Token、流程有時效性或是有順序性，不能讓、或是允許使用者回溯的狀況，都可以透過上方的這些轉址方式做到細節的流程控制。
希望這篇文章可以幫助到跟我一樣，一開始不太清楚轉址流程的前端新手，我是 Vivian，我們下次見。
參考資料：
你可能也想看
