js实现网页切换
实现网页切换的常见方法
使用 window.location.href 跳转
通过修改 window.location.href 实现页面跳转，是最基础的方式：
window.location.href = 'https://example.com';使用 window.location.replace 替换当前页
此方法不会在浏览器历史记录中生成新条目：
window.location.replace('https://example.com');使用 window.open 打开新窗口
在新标签页或窗口中打开页面：
window.open('https://example.com', '_blank');使用 History API 实现无刷新跳转
适用于单页应用（SPA），不触发页面刷新：
history.pushState({}, '', '/new-page');
// 或替换当前历史记录
history.replaceState({}, '', '/new-page');使用 <a> 标签模拟点击
通过编程方式触发链接点击：
const link = document.createElement('a');
link.href = 'https://example.com';
link.click();使用表单提交跳转
通过 JavaScript 提交表单实现跳转：
const form = document.createElement('form');
form.method = 'POST';
form.action = '/target-page';
document.body.appendChild(form);
form.submit();使用 meta 标签自动跳转
在 HTML 中插入 meta 标签实现自动跳转：
const meta = document.createElement('meta');
meta.httpEquiv = 'refresh';
meta.content = '0;url=https://example.com';
document.head.appendChild(meta);注意事项
- 使用
window.open可能会被浏览器拦截弹窗 - History API 需要配合路由库（如 React Router/Vue Router）使用
- 表单提交适用于需要传递数据的场景
- 考虑添加跳转前的确认提示，避免意外导航
以上方法可根据具体需求选择，单页应用推荐使用 History API，传统页面跳转可使用 location.href。
