1. 常见实现方式总览
在前端开发中，JS页面跳转的实现方法多样，目标是实现快速切换与良好历史记录体验。核心点是区分是否需要刷新、是否需要保留历史条目，以及是否支持浏览器前进后退按钮。
不同方案的适用场景包括：全页跳转、单页应用路由、以及哈希路由等。掌握这些差异有助于在项目中选对方案。
2. 通过 window.location 实现跳转
直接赋值跳转
直接设置 window.location.href 会触发页面的完整重载，适用于跨站点跳转或需要重新加载资源的场景。
这种方式的历史记录行为与普通链接一致，用户可以通过后退按钮返回到上一页。
// 直接跳转到另一个页面
window.location.href = 'https://example.com/page';
使用 location.assign
location.assign 与 href 等效，但以函数方式调用，便于在脚本中实现跳转逻辑，同时保持历史条目。
在复杂跳转逻辑中，保持历史栈的一致性是关键。
// 使用 assign 实现跳转
window.location.assign('/new-page');
使用 location.replace
如果需要替换当前历史条目而不让用户返回到原页面，使用 location.replace，这不会添加新的历史记录。
这种场景下，避免打乱用户的后退导航，尤其是在重定向或认证跳转时非常有用。
// 替换当前页面，移除历史记录中的上一条
window.location.replace('/login');
3. History API 的 pushState / replaceState
SPA 路由与地址栏同步
在单页应用中，History API 的 pushState 可以在不重新加载页面的情况下修改地址栏的 URL，便于实现路由的状态管理。
配合 onpopstate 事件，可以对浏览器前进后退进行路由刷新，确保页面状态的一致性。
// pushState 更新 URL，但不触发加载
history.pushState({ page: '/dashboard' }, '', '/dashboard');// 回退/前进时的处理
window.addEventListener('popstate', function(event) {// 根据 event.state 重绘界面console.log(event.state);
});
使用 replaceState 进行重写历史记录
replaceState 与 pushState 的区别是不会添加历史记录，而是替换当前条目。
在认证、重定向等场景中，避免创建多余的历史项有助于用户体验。
// 替换当前历史项，常用于跳过中间页
history.replaceState({ page: '/account' }, '', '/account');
4. Hash 路由：利用 URL hash 实现前端路由
hashchange 事件与路由更新
使用哈希路由时，URL 的哈希部分（如 #/products/42）不会触发页面重载，适合静态页面的轻量路由。
通过监听 hashchange 来检测路由变化并切换视图，可以实现简单的前端导航。
// 设置哈希并监听变化
location.hash = '#/about';
window.addEventListener('hashchange', function() {// 解析 location.hash，渲染对应视图const route = location.hash.slice(1);renderRoute(route);
});
5. 通过 A 标签和事件代理进行跳转
无刷新的优雅跳转
对于外部链接仍然使用 <a>，但对内部路由可以通过事件代理捕获点击事件并调用 History API 或 hash 路由 更新。
这种模式可以实现 无刷新的用户体验，并在逐步降级中兼容老版本浏览器。
// 事件代理：拦截内部链接点击，使用 pushState 跳转
document.addEventListener('click', function(e) {const a = e.target.closest('a[data-internal]');if (a) {e.preventDefault();history.pushState(null, '', a.getAttribute('href'));// 触发路由渲染逻辑renderRoute(location.pathname);}
});
6. 其他实现方式与注意事项
服务端重定向与 SEO 的权衡
在需要跨站点跳转或重定向时，服务器端重定向（如 301、302）可能比前端跳转更可靠，尤其对搜索引擎友好性有影响。
单页应用中，合理使用 History API 和 Hash 路由可以实现良好的 SEO 与性能折中。对于初次渲染，仍需关注 首屏加载体验与资源缓存策略。
