页面跳转方法

1. 使用 location 对象的其他方法

location 是 window 的属性，但可以直接通过 location 访问其方法和属性（无需 window. 前缀）：

• location.assign(url)
  跳转到新页面（添加历史记录，可返回）。

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

• location.replace(url)
  替换当前页面（不添加历史记录，不可返回）。

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

• location.reload()
  刷新当前页面。

  location.reload(); // 从缓存加载
  location.reload(true); // 从服务器重新加载

2. 使用 URLSearchParams 处理查询参数

URLSearchParams 是专门处理 URL 查询参数的接口，适合动态修改 URL 参数：

// 获取当前 URL 的查询参数
const url = new URL("https://example.com?name=John&age=30");
const params = new URLSearchParams(url.search);

// 添加/修改参数
params.set("age", 31);
params.append("city", "New York");

// 构造新的 URL
url.search = params.toString();
console.log(url.href); 
// 输出: https://example.com?name=John&age=31&city=New+York

3. 使用 URL 对象构造和解析 URL

URL 对象可以解析和构建完整的 URL，支持链式操作：

// 解析现有 URL
const url = new URL("https://example.com/path?query=1");

// 修改 URL 的各个部分
url.protocol = "https";
url.pathname = "/new-path";
url.searchParams.set("query", "2");

console.log(url.href); 
// 输出: https://example.com/new-path?query=2

4. 使用 fetch 或 XMLHttpRequest 发起请求

如果需要发送 HTTP 请求（如 POST），可以使用 fetch 或 XMLHttpRequest，但不会直接跳转页面：

// 使用 fetch 发送 POST 请求
fetch("https://api.example.com/data", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ key: "value" })
})
  .then(response => response.json())
  .then(data => console.log(data));

// 使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = () => console.log(xhr.responseText);
xhr.send();

5. 使用表单提交实现 POST 跳转

通过动态创建隐藏表单，实现 POST 请求跳转：

const form = document.createElement("form");
form.method = "POST";
form.action = "https://example.com/submit";
form.style.display = "none";

const input = document.createElement("input");
input.name = "token";
input.value = "abc123";
form.appendChild(input);

document.body.appendChild(form);
form.submit();

6. 使用前端路由库（如 Vue Router / React Router）

在单页应用（SPA）中，通常使用前端路由库管理页面跳转：

// Vue Router 示例
this.$router.push({ path: "/home" });

// React Router 示例
import { useHistory } from "react-router-dom";
const history = useHistory();
history.push("/home");

7. 使用 history API 实现无刷新跳转

history.pushState() 和 history.replaceState() 可以修改 URL 而不刷新页面：

// 添加新的历史记录
history.pushState({ page: 1 }, "Page 1", "/page1");

// 替换当前历史记录
history.replaceState({ page: 2 }, "Page 2", "/page2");

// 监听 URL 变化
window.addEventListener("popstate", (event) => {
  console.log("当前 URL:", location.pathname);
});

8. 使用第三方库简化 URL 操作

一些轻量级库（如 urljs、JSUrlify）提供了更简洁的 API：

// 使用 urljs 修改 URL
const url = new URL("https://example.com");
url.set("path", "/new-path");
url.addParam("query", "1");
console.log(url.toString()); 
// 输出: https://example.com/new-path?query=1

9. 使用 location.href 的变体

虽然 window.location.href 是最常用的方式，但也可以直接使用 location.href：

location.href = "https://www.example.com"; // 等同于 window.location.href

10. 使用 location 的属性直接修改 URL

通过修改 location 的属性（如 pathname、search）间接跳转：

// 修改路径
location.pathname = "/new-path";

// 修改查询参数
location.search = "?query=1";

// 修改锚点
location.hash = "#section1";

总结：不同方法的适用场景