js怎么实现网页跳转
使用 window.location.href
通过修改 window.location.href 属性实现跳转，这是最常用的方法：
window.location.href = "https://example.com";使用 window.location.replace
replace 方法会替换当前页面，不会在浏览器历史记录中留下痕迹：
window.location.replace("https://example.com");使用 window.open
在新窗口或标签页中打开链接，可通过参数控制是否在新窗口打开：
window.open("https://example.com", "_blank");使用 location.assign
assign 方法会加载新页面并在历史记录中保留当前页面：
window.location.assign("https://example.com");使用 HTML 的 meta 标签
通过设置 meta 标签实现自动跳转，适用于纯 HTML 场景：
<meta http-equiv="refresh" content="0; url=https://example.com">使用表单提交
通过动态创建表单并提交实现跳转：
const form = document.createElement("form");
form.method = "GET";
form.action = "https://example.com";
document.body.appendChild(form);
form.submit();使用锚点链接
通过模拟点击锚点链接实现跳转：
const link = document.createElement("a");
link.href = "https://example.com";
link.click();使用 history.pushState
在不刷新页面的情况下修改 URL，适用于单页应用：
history.pushState({}, "", "https://example.com");使用 history.replaceState
类似 pushState 但不会产生新的历史记录：
history.replaceState({}, "", "https://example.com");使用服务器端重定向
在服务器端配置重定向，例如在 Node.js 中使用 Express：
res.redirect("https://example.com");使用框架特定方法
在 React 中使用 useNavigate 钩子：
const navigate = useNavigate();
navigate("/target-page");在 Vue 中使用 router.push：
this.$router.push("/target-page");在 Angular 中使用 Router 服务：
this.router.navigate(["/target-page"]);使用事件触发跳转
在按钮点击等事件中触发跳转：
document.getElementById("myButton").addEventListener("click", () => {
window.location.href = "https://example.com";
});使用 setTimeout 延迟跳转
延迟一定时间后执行跳转：
setTimeout(() => {
window.location.href = "https://example.com";
}, 3000);使用条件跳转
根据条件决定是否跳转：
if (condition) {
window.location.href = "https://example.com";
}使用 POST 请求跳转
通过 POST 请求跳转，适用于需要传递数据的场景：
const form = document.createElement("form");
form.method = "POST";
form.action = "https://example.com";
const input = document.createElement("input");
input.type = "hidden";
input.name = "data";
input.value = "someData";
form.appendChild(input);
document.body.appendChild(form);
form.submit();使用 iframe 跳转
在 iframe 中加载目标页面：
const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
document.body.appendChild(iframe);使用 WebSocket 重定向
通过 WebSocket 接收服务器指令进行跳转：
const socket = new WebSocket("wss://example.com");
socket.onmessage = (event) => {
if (event.data === "redirect") {
window.location.href = "https://example.com";
}
};使用 Service Worker 拦截跳转
通过 Service Worker 拦截请求并重定向：
self.addEventListener("fetch", (event) => {
if (event.request.url.includes("redirect")) {
event.respondWith(Response.redirect("https://example.com"));
}
});使用 JavaScript 书签
创建可点击的 JavaScript 书签实现跳转：
javascript:window.location.href="https://example.com";使用框架路由对象
在 SPA 框架中直接操作路由对象：
// React Router v6
const navigate = useNavigate();
navigate("/new-page");
// Vue Router
this.$router.push("/new-page");
// Angular Router
import { Router } from "@angular/router";
constructor(private router: Router) {}
this.router.navigate(["/new-page"]);
