js实现跳转

使用 window.location 跳转

通过修改 window.location.href 或直接使用 window.location 实现页面跳转，适用于普通跳转或带参数的 URL。

// 方法1：直接赋值
window.location.href = 'https://example.com';

// 方法2：简写形式
window.location = 'https://example.com';

// 带参数的跳转
window.location.href = 'https://example.com?param=value';

使用 location.assign()

location.assign() 方法会加载新文档并保留浏览器历史记录，允许用户通过后退按钮返回原页面。

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

使用 location.replace()

location.replace() 直接替换当前页面，不保留历史记录，用户无法通过后退按钮返回。

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

使用 window.open()

在新标签页或窗口中打开链接，可通过参数控制打开方式。

// 新标签页打开（默认）
window.open('https://example.com');

// 新窗口打开
window.open('https://example.com', '_blank');

// 当前窗口打开（等效于 location.href）
window.open('https://example.com', '_self');

使用 meta 标签跳转

通过动态插入 <meta> 标签实现延迟跳转，常用于页面自动跳转场景。

// 3秒后跳转
const meta = document.createElement('meta');
meta.httpEquiv = 'refresh';
meta.content = '3;url=https://example.com';
document.head.appendChild(meta);

使用表单提交跳转

通过动态创建表单并提交实现 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 = 'example';
form.appendChild(input);

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

使用 History API

通过 history.pushState() 或 history.replaceState() 修改浏览器地址栏而不刷新页面，适用于单页应用（SPA）。

// 添加历史记录并跳转
history.pushState({}, '', '/new-path');

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

注意事项

• 使用 window.open() 可能被浏览器拦截，需确保由用户触发（如点击事件）。
• location.replace() 不保留历史记录，适合登录后跳转等场景。
• History API 需配合前端路由框架使用，单独调用可能需手动处理页面内容更新。