快捷導(dǎo)航

前端JavaScript跳轉(zhuǎn)頁(yè)面的幾種方法以及區(qū)別詳解

更新時(shí)間：2025年04月21日 10:52:23 作者：vivi_chou

這篇文章主要介紹了前端JavaScript跳轉(zhuǎn)頁(yè)面的幾種方法以及區(qū)別,分別是window.location.href、window.location.assign()、window.location.replace()、window.location.reload()、window.location.hash、window.open()和document.location其中方法,需要的朋友可以參考下

1. window.location.href

描述：window.location.href 是瀏覽器地址欄的 URL，使用它可以加載一個(gè)新的 URL，類似于點(diǎn)擊一個(gè)超鏈接。
特點(diǎn)：這種跳轉(zhuǎn)會(huì)在瀏覽器歷史記錄中創(chuàng)建一條新記錄，因此用戶可以通過(guò)瀏覽器的后退按鈕返回到原頁(yè)面。
用法：
```
window.location.;
```
用途：常用于頁(yè)面跳轉(zhuǎn)和導(dǎo)航。

2. window.location.assign()

描述：window.location.assign() 方法也會(huì)加載新的頁(yè)面，并在歷史記錄中添加一條記錄，行為與 window.location.href 相似。
特點(diǎn)：它與 window.location.href 的區(qū)別不大，都是將用戶導(dǎo)航到新的 URL，但 assign 是一個(gè)方法，href 是一個(gè)屬性。

用法：

window.location.assign("https://www.example.com");

用途：與 window.location.href 一樣，常用于導(dǎo)航和跳轉(zhuǎn)。

3. window.location.replace()

描述：window.location.replace() 用于跳轉(zhuǎn)到一個(gè)新的頁(yè)面，但不會(huì)在歷史記錄中添加新記錄。也就是說(shuō)，用戶不能通過(guò)瀏覽器的后退按鈕返回到原頁(yè)面。
特點(diǎn)：這種跳轉(zhuǎn)會(huì)替代當(dāng)前頁(yè)面，常用于希望用戶不能回到當(dāng)前頁(yè)面的情況。

用法：

window.location.replace("https://www.example.com");

用途：常用于登錄后跳轉(zhuǎn)，避免用戶返回到登錄頁(yè)面。

4. window.location.reload()

描述：window.location.reload() 方法用于重新加載當(dāng)前頁(yè)面。
特點(diǎn)：此方法會(huì)重新加載當(dāng)前頁(yè)面，可以選擇是否強(qiáng)制從服務(wù)器重新加載頁(yè)面（不使用緩存）。

用法：

window.location.reload(); // 刷新當(dāng)前頁(yè)面
window.location.reload(true); // 強(qiáng)制從服務(wù)器加載

用途：用于刷新當(dāng)前頁(yè)面。

5. window.location.hash

描述：通過(guò)修改 URL 中的哈希值（# 后面的部分），可以在不重新加載頁(yè)面的情況下更新頁(yè)面狀態(tài)。這種方式不會(huì)觸發(fā)頁(yè)面的跳轉(zhuǎn)，但會(huì)更改 URL。
特點(diǎn)：哈希值跳轉(zhuǎn)不涉及頁(yè)面加載，通常用于單頁(yè)應(yīng)用（SPA）中的頁(yè)面狀態(tài)管理，能夠?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)或內(nèi)容的切換。

用法：

window.location.hash = "#section2";  // 更新哈希值

用途：適用于單頁(yè)應(yīng)用的狀態(tài)管理和頁(yè)面內(nèi)導(dǎo)航。

6. window.open()

描述：window.open() 方法可以打開一個(gè)新的瀏覽器窗口或標(biāo)簽頁(yè)，并加載指定的 URL。
特點(diǎn)：這種方法可以打開新窗口或標(biāo)簽頁(yè)，跳轉(zhuǎn)到指定的頁(yè)面。它不會(huì)影響當(dāng)前頁(yè)面的歷史記錄。

用法：

window.open("https://www.example.com", "_blank");  // 在新標(biāo)簽頁(yè)打開

用途：適用于打開新窗口、彈出層或者新的瀏覽器標(biāo)簽。

7. document.location

描述：document.location 也與 window.location 類似，它表示當(dāng)前文檔的 URL。使用它可以觸發(fā)頁(yè)面跳轉(zhuǎn)。
特點(diǎn)：document.location 是 window.location 的簡(jiǎn)寫形式，作用相同。

用法：

document.location = "https://www.example.com";

用途：可以用來(lái)導(dǎo)航到新頁(yè)面，和 window.location.href 用法一樣。

區(qū)別總結(jié)：

方法	歷史記錄	新標(biāo)簽頁(yè)/窗口	特點(diǎn)
`window.location.href`	有	否	標(biāo)準(zhǔn)跳轉(zhuǎn)，創(chuàng)建歷史記錄
`window.location.assign()`	有	否	與 `href` 類似，創(chuàng)建歷史記錄
`window.location.replace()`	無(wú)	否	跳轉(zhuǎn)后不能返回到當(dāng)前頁(yè)面
`window.location.reload()`	無(wú)	否	刷新當(dāng)前頁(yè)面
`window.location.hash`	有	否	改變哈希值，常用于單頁(yè)應(yīng)用的狀態(tài)管理
`window.open()`	無(wú)	有	在新標(biāo)簽頁(yè)/窗口打開頁(yè)面
`document.location`	有	否	`window.location` 的簡(jiǎn)寫

適用場(chǎng)景：

常規(guī)頁(yè)面跳轉(zhuǎn)：window.location.href 或 window.location.assign()。
替換當(dāng)前頁(yè)面（不允許用戶返回）：window.location.replace()。
刷新頁(yè)面：window.location.reload()。
單頁(yè)應(yīng)用中的頁(yè)面內(nèi)跳轉(zhuǎn)：window.location.hash。
打開新窗口或標(biāo)簽：window.open()。

這些方法的選擇應(yīng)根據(jù)你的需求來(lái)決定，是否希望保留歷史記錄，是否需要打開新窗口，或是否需要刷新頁(yè)面等。

總結(jié)

到此這篇關(guān)于前端JavaScript跳轉(zhuǎn)頁(yè)面的幾種方法以及區(qū)別的文章就介紹到這了,更多相關(guān)前端跳轉(zhuǎn)頁(yè)面方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: