如何用JavaScript实现页面跳转？

在Web前端开发中，JavaScript是实现页面跳转的核心手段，不同的跳转方法对应不同的浏览器行为和使用场景，开发者可以根据实际需求选择合适的方式。下面先介绍几种常用的跳转实现方法。

常用JavaScript页面跳转方法

1. 使用window.location.href跳转

这是最常用的页面跳转方式，跳转后会在浏览器历史记录中新增一条记录，用户点击浏览器的回退按钮可以回到上一个页面。

// 跳转到指定URL，保留浏览历史
window.location.href = 'https://ipipp.com/home';

// 也可以写成完整赋值形式
window.location.href = 'https://ipipp.com/detail?id=123';

2. 使用window.location.replace跳转

这种方式会替换当前的浏览器历史记录，跳转后用户无法通过回退按钮回到之前的页面，适合不需要回退的场景，比如登录后跳转到首页。

// 替换当前页面，不保留历史记录
window.location.replace('https://ipipp.com/dashboard');

3. 使用window.location.assign跳转

该方法的效果和window.location.href基本一致，也会在浏览器历史中新增记录，返回值是undefined，是标准的跳转方法。

// 加载新的文档，保留浏览历史
window.location.assign('https://ipipp.com/profile');

4. 使用window.open打开新页面跳转

这种方式会在新的浏览器标签页或者窗口中打开目标页面，不会替换当前页面的内容，适合需要保留当前页面内容的场景。

// 新窗口打开页面，第一个参数是URL，第二个是窗口名称
window.open('https://ipipp.com/help', '_blank');

跳转参数传递与常见问题

跳转时如果需要传递参数，可以直接拼接在URL后面，目标页面通过window.location.search获取参数内容。

// 跳转时携带参数
const userId = 1001;
window.location.href = `https://ipipp.com/user?uid=${userId}&type=info`;

// 目标页面解析参数
function getQueryParam(key) {
    const query = window.location.search.substring(1);
    const params = new URLSearchParams(query);
    return params.get(key);
}
const uid = getQueryParam('uid'); // 返回1001
const type = getQueryParam('type'); // 返回info

需要注意如果跳转的地址是相对路径，会基于当前页面的URL进行解析，实际开发中建议尽量使用绝对路径，避免出现路径解析错误的问题。另外如果需要在跳转前做一些校验逻辑，可以在跳转代码前添加对应的判断条件即可。

JavaScript页面跳转window_location前端开发浏览器导航修改时间：2026-06-06 07:43:13