Javascript 可以通過改變地址欄的方式實現頁面跳轉,這在 Web 開發中十分常見。比如,我們需要跳轉到某個特定的頁面,可以通過以下代碼實現:
window.location.;
上面代碼中,window.location.href 可以直接設置為我們要跳轉的頁面的地址。
另外,還有一種比較常見的方式是將參數傳遞到跳轉的頁面中,比如我們需要跳轉到一個商品詳情頁面,需要傳遞商品 ID 參數。這個時候,我們可以通過類似以下的代碼進行跳轉:
const productId = "123456"; const url = `https://example.com/productDetail?productId=${productId}`; window.location.href = url;
上面代碼中,我們使用了 ES6 中的字符串模板,將商品 ID 組裝到 URL 中,然后再通過 window.location.href 進行跳轉。
另外,有些情況下我們需要對歷史記錄進行修改,比如在某些場景下點擊返回按鈕需要跳轉到指定的頁面。這個時候,我們可以使用 window.history 對象來實現:
window.history.replaceState(null, "Title", "/newPage");
上面代碼中,history.replaceState() 方法用于替換當前記錄,將地址改變為 /newPage。
當然,有些情況下我們需要獲取當前頁面地址,以便進行一些其他的操作。這個時候,我們可以使用 window.location 對象上的各種屬性來獲取:
console.log(window.location.href); // 當前頁面完整地址 console.log(window.location.host); // 當前頁面 host console.log(window.location.pathname); // 當前頁面路徑名 console.log(window.location.search); // 當前頁面查詢參數 console.log(window.location.hash); // 當前頁面錨點
總結來說,通過改變地址欄的方式可以實現各種跳轉操作,比如跳轉到指定頁面、傳遞參數、修改歷史記錄等等。在實際項目中,這種方式非常常見,掌握好這些知識對于 Web 開發十分重要。