在JavaScript中实现页面跳转主要依靠操作浏览器提供的BOM相关对象，不同的方法对应不同的跳转行为和效果，开发者可以根据实际需求选择合适的方式。
一、使用location.href实现跳转
这是最常用的页面跳转方式，修改window.location.href的值后，浏览器会跳转到指定的URL，并且会在浏览器的历史记录中留下当前页面的记录，用户点击后退按钮可以回到之前的页面。
// 跳转到指定页面 window.location.href = 'https://ipipp.com/index.html'; // 也可以省略window，直接写location.href location.href = 'https://ipipp.com/detail.html?id=123';
二、使用location.assign()实现跳转
location.assign()方法的作用和直接修改location.href基本一致，同样会触发页面跳转并保留历史记录，该方法的参数就是要跳转的目标URL。
// 跳转到目标页面，效果和location.href相同
location.assign('https://ipipp.com/list.html');三、使用location.replace()实现跳转
和前两种方式不同，location.replace()跳转后不会在浏览器的历史记录中保留当前页面的记录，用户点击后退按钮无法回到跳转前的页面，适合一些不需要保留历史记录的场景，比如登录成功后跳转到首页。
// 跳转后无法后退到当前页面
location.replace('https://ipipp.com/home.html');四、使用location.reload()实现当前页面刷新
如果需要重新加载当前页面，可以使用location.reload()方法，该方法默认会从浏览器缓存中加载页面，如果传入参数true，则会强制从服务器重新拉取资源。
// 刷新当前页面，优先使用缓存 location.reload(); // 强制从服务器重新加载当前页面 location.reload(true);
五、不同跳转方式的对比
为了更清晰地了解不同跳转方式的区别，我们可以通过下面的表格进行对比：
| 方法 | 是否保留历史记录 | 适用场景 |
|---|---|---|
| location.href | 是 | 普通页面跳转，需要用户可后退的场景 |
| location.assign() | 是 | 和location.href一致，语义化更明确 |
| location.replace() | 否 | 登录跳转、错误页跳转等不需要保留历史的场景 |
| location.reload() | 不涉及 | 需要重新加载当前页面的场景 |
六、跳转时传递参数的注意事项
如果跳转时需要传递参数，可以直接拼接在URL后面，不过需要注意对参数进行编码，避免出现特殊字符导致跳转异常。
// 传递参数时对参数值进行编码
const userName = '张三';
const age = 20;
location.href = `https://ipipp.com/user.html?name=${encodeURIComponent(userName)}&age=${age}`;在目标页面可以通过URLSearchParams来获取传递的参数：
// 获取URL中的参数
const params = new URLSearchParams(window.location.search);
const name = params.get('name'); // 张三
const age = params.get('age'); // 20
JavaScript页面跳转window_locationlocation_href前端开发修改时间：2026-06-07 03:12:04