js实现跳转界面

使用 window.location.href 实现页面跳转

通过修改 window.location.href 属性，可以直接跳转到目标 URL。浏览器会加载新页面并替换当前历史记录。

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

使用 window.location.replace 实现无痕跳转

replace() 方法会跳转到新页面，但不会在浏览器历史记录中留下当前页面的记录，用户无法通过“后退”按钮返回。

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

使用 window.open 在新窗口或标签页打开

通过 window.open 可以在新窗口或标签页中打开目标 URL，支持自定义窗口参数（如尺寸、工具栏等）。

window.open('https://example.com', '_blank');

使用 location.assign 跳转并保留历史记录

assign() 方法加载新页面，但保留当前页面的历史记录，用户可通过“后退”按钮返回。

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

通过 <a> 标签模拟点击实现跳转

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

const link = document.createElement('a');
link.href = 'https://example.com';
link.click();

使用 history.pushState 无刷新修改 URL

适用于单页应用（SPA），仅更新 URL 而不重新加载页面。需配合路由库或监听 popstate 事件实现完整功能。

history.pushState({}, '', '/new-path');

使用 form.submit 通过表单跳转

动态创建表单并提交，适合需要传递 POST 数据或模拟表单提交的场景。

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

注意事项

• 跳转前可检查 URL 合法性，避免安全风险。
• 单页应用推荐使用路由库（如 React Router、Vue Router）管理跳转逻辑。
• 部分浏览器可能拦截 window.open 的弹出窗口，需确保由用户操作触发。