下面给你一份 《JS 控制浏览器前进、后退、页面跳转——最全详细方法与示例》，包含最新浏览器规范（含 History API、Location API、hash 跳转、SPA 场景等）。这是你能看到最完整的一版，适合新手到高级开发者。

🚀 一、浏览器跳转、前进、后退的三大 API 分别是什么？

JS 控制浏览器导航的主要 API：

API用途
location页面跳转、刷新
history前进、后退、修改历史记录
window控制窗口、打开新页面

🚀 二、Location API —— 页面跳转最常用

1️⃣ 强制跳转（会产生历史记录）

location.href = "https://example.com";

等价于点击链接，会加入浏览器历史记录，能 返回。

2️⃣ 使用 location.assign()（完全等于 href）

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

3️⃣ 页面重定向（不产生历史记录）

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

用户 无法返回上一页（用于登录重定向、鉴权跳转）。

4️⃣ 刷新页面

location.reload();      // 普通刷新（有缓存）
location.reload(true);  // 强制刷新（已废弃，不建议）

现代写法强制刷新：

location.href = location.href;

5️⃣ 获取当前页面 URL 信息

console.log(location.href);
console.log(location.pathname);
console.log(location.hash);
console.log(location.search);
console.log(location.origin);

🚀 三、History API —— 控制前进/后退、修改历史

1️⃣ 后退一页

history.back();

等价于用户点击 “返回”。

2️⃣ 前进一步

history.forward();

3️⃣ 前进/后退 N 步

history.go(-1); // 后退一页
history.go(1);  // 前进一页
history.go(2);  // 前进 2 页
history.go(-3); // 后退 3 页

4️⃣ pushState（新增历史记录但不跳转）

history.pushState({id:1}, "", "/product?id=1");

作用：

  • 页面不刷新
  • URL 发生改变
  • 会加入历史栈（可返回）

SPA 路由使用该方法（Vue Router / React Router）。

5️⃣ replaceState（修改当前记录不新增）

history.replaceState({step:2}, "", "/checkout/step2");

适合：

  • 单页应用替换当前 URL
  • 登录成功后重写地址，避免用户返回登录页

6️⃣ 捕获浏览器前进/后退事件

window.onpopstate = function (event) {
    console.log("用户点击了返回或前进", event.state);
};

SPA 监听路由变化必须用到它。

🚀 四、Hash（#）跳转（无需刷新页面）

改变 hash：

location.hash = "#section2";

或者带内容：

location.hash = "id=123";

优势：

  • 不刷新页面
  • 兼容性极好
  • 可监听

监听 hash 变化：

window.addEventListener("hashchange", () => {
    console.log("hash changed:", location.hash);
});

Vue Router 的 hash 模式就是基于此。

🚀 五、JS 打开新窗口、关闭窗口

1️⃣ 打开新窗口（后面可控制）

const win = window.open("https://example.com", "_blank");

2️⃣ 打开空白窗口（不被阻止）

const win = window.open("", "_blank");
win.location.href = "https://example.com";

3️⃣ 关闭当前窗口

window.close();

⚠️ 只有脚本打开的窗口才允许关闭。

🚀 六、总结对比（最常用方法表）

功能方法是否刷新是否可返回
跳转location.href✔✔
跳转location.assign✔✔
跳转（不可返回）location.replace✔✖
刷新location.reload✔—
后退history.back✖—
前进history.forward✖—
前进后退history.go✖—
新增历史记录history.pushState✖✔
替换历史记录history.replaceState✖✖
打开新窗口window.open✔✔

🚀 七、典型实战示例

✔ 示例 1：用户登录后跳转，不允许返回登录页

location.replace("/home");

✔ 示例 2：商品页切换路由而不刷新（SPA）

history.pushState({product:101}, "", "/product/101");

✔ 示例 3：监听用户点击浏览器返回键

window.onpopstate = (event) => {
    console.log("用户返回了", event.state);
};

✔ 示例 4：多步表单阻止用户返回

history.pushState(null, "", location.href);

✔ 示例 5：打开一个支付页面

window.open("https://pay.xxx.com", "_blank");

🚀 八、前端项目（Vue/React）如何正确使用？

✔ Vue Router：内部使用 pushState/replaceState
✔ React Router：同样用 History API
✔ 浏览器返回键 → popstate 事件
✔ 404/刷新需要后端支持 history fallback