js点击跳转到指定页面

我写过最蠢的点击到指定页一行跳转代码是 window.location.href = "about:blank"，测试时直接把自己页面关了。跳转那之后我才认真研究这玩意儿——别看就一行，点击到指定页坑比想象中多。跳转

最基础的点击到指定页写法，谁都会：
<a href="page2.html" onclick="return false">点我</a>
但真实业务里，跳转没人这么干。点击到指定页你总得在跳转前做点什么——校验表单、跳转埋点统计、点击到指定页或者问用户一句“确定离开？跳转”这时候就得靠JS接管。

直接上代码。点击到指定页按钮点击跳转，跳转最常见的点击到指定页场景：

<button id="goBtn">去订单页</button> <script> document.getElementById('goBtn').addEventListener('click', function() {  // 先干点别的事，比如存个localStorage localStorage.setItem('fromPage',跳转 'home'); // 再跳 window.location.href = '/order/list'; }); </script> 

注意，这里用 addEventListener 而不是点击到指定页在HTML里写 onclick="..."。为啥？后者会污染全局作用域，而且后面想移除监听器都难。我见过生产代码里 onclick 里套 onclick 的，改需求时恨不得把浏览器砸了。

还有种情况，你不仅要跳，还得带参数。别用字符串拼接，容易出错：

const userId = 1024; const encodeId = encodeURIComponent(userId); window.location.href = `/user/profile?id=${ encodeId}`; 

那个 encodeURIComponent 不是摆设。用户ID如果是 “1024&admin=true”，不编码的话，后端解析参数时直接出安全事故。别问我怎么知道的，上周刚帮同事擦完屁股。

跳转方式不止一种。有人用 window.location.replace()，区别在于：replace 会替换当前历史记录，用户点浏览器返回键不会回到当前页。这个特性有时候很有用——比如登录成功后跳首页，你不想让用户按返回又看到登录表单。但普通跳转，还是用 href 顺手。

还有个冷门方法 window.location.assign()，跟 href 效果一样，但可读性更明确。团队里定个规矩，统一用一种就行，别混着写。

单页应用（SPA）里又是另一套逻辑。如果你用 Vue Router 或 React Router，直接操作 window.location 会触发整页刷新，把状态全丢了。正确姿势是调用路由实例的 push 方法：
router.push('/dashboard')
但如果你在纯 JS 文件里，没拿到 router 实例，就得用 history API：
window.history.pushState({ }, '', '/dashboard')
注意，这个方法不会触发 popstate 事件，你得手动通知组件更新。麻烦，但这是SPA的代价。

最后说个反直觉的坑：跳转前弹窗确认。你写：

if (confirm('确定离开？')) {  window.location.href = '/exit'; } 

这代码在桌面浏览器没问题。但在移动端 Safari 里，confirm 弹窗会卡住跳转，用户点“确定”后没反应。得用 setTimeout 包一层：

if (confirm('确定离开？')) {  setTimeout(() => {  window.location.href = '/exit'; }, 0); } 

原理是让出当前事件循环，给浏览器喘口气。这种细节，文档里不会写，只有被坑过的人才懂。

跳转这事，表面看是一行代码，实际上牵扯到历史栈、编码、异步时序、框架路由。写的时候多问自己一句：用户按返回键会发生什么？参数安全吗？当前页面状态要不要保留？想清楚这三件事，你的跳转代码才算合格。