js中怎么实现页面跳转

使用 window.location.href

通过修改 window.location.href 实现跳转，直接赋值目标 URL：

window.location.href = 'https://example.com';

使用 window.location.replace

跳转但不保留当前页面历史记录，用户无法通过浏览器后退按钮返回：

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

使用 window.open

在新标签页或窗口中打开页面，可通过参数控制行为：

window.open('https://example.com', '_blank'); // 新标签页
window.open('https://example.com', '_self');  // 当前标签页

使用 HTML <a> 标签模拟

动态创建 <a> 标签并触发点击，适合需要模拟用户点击的场景：

const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank'; // 可选，控制打开方式
link.click();

使用 history.pushState 或 replaceState

适用于单页应用（SPA），仅更新 URL 而不刷新页面：

history.pushState({}, '', '/new-path'); // 添加历史记录
history.replaceState({}, '', '/new-path'); // 替换当前历史记录

需配合路由库（如 React Router、Vue Router）使用以实现完整跳转逻辑。

使用表单提交跳转

动态提交表单实现跳转，适用于需要传递参数的场景：

const form = document.createElement('form');
form.method = 'GET';
form.action = 'https://example.com';
document.body.appendChild(form);
form.submit();

注意事项

• 跨域限制：某些方法（如 window.open）可能被浏览器拦截，需用户主动允许弹窗。
• SPA 路由：单页应用推荐使用前端路由库（如 React Router）管理导航。
• SEO 影响：history.pushState 需确保后端配置支持，避免直接访问新 URL 返回 404。