应使用 else if 链或 switch 替代多层嵌套 if，每个分支末尾加 return 或 break；优先用 location.replace() 防回退；异步校验需 await 确保流程正确。
多个 if 条件嵌套跳转容易出错
直接用多层 if 套 if 判断再 window.location.href 跳转，逻辑一复杂就难维护，而且漏写 else 或忘记 return 会导致后续条件误执行。常见错误是：前一个条件满足跳转了，但代码没中断，后面又触发另一次跳转，浏览器报 DOMException: Failed to execute 'replace' on 'Location' 或白屏。
- 每个跳转分支末尾必须加
return（在函数内）或break（在 switch 中） - 避免用
if (a) { ... } if (b) { ... }这种并列结构——它不是“多选一”，而是“全检查” - 优先用
else if链或switch，确保只走一个分支
switch + 表达式组合判断更清晰
当判断依据是某个值（比如 URL 参数、表单字段、状态码），把多条件归一为一个表达式，再用 switch 分支处理，可读性高且不易漏终止。例如根据用户角色和权限位做跳转：
const role = getUserRole();
const permBits = getPermissionBits();
const decisionKey = `${role}-${(permBits & 0b100) ? 'edit' : 'view'}`;
switch (decisionKey) {
case 'admin-edit':
window.location.href = '/admin/dashboard';
return;
case 'user-view':
window.location.href = '/user/profile';
return;
default:
window.location.href = '/login';
return;
}
注意：switch 的匹配是严格相等（===），字符串拼接要确保类型一致；default 分支不能省，否则可能静默失败。
用 location.replace() 替代 location.href 防回退
如果跳转是流程强制的（如登录后校验失败跳回首页、未授权访问拦截），该用 location.replace()。它不会在历史记录中留下当前页，用户点返回不会卡在无效页面上。
立即学习“前端免费学习笔记（深入）”；
-
window.location.href = url→ 会保留当前页，可后退 -
window.location.replace(url)→ 替换当前记录，不可后退 - 服务端重定向（302）无法替代前端判断跳转，因为条件依赖运行时 JS 状态
异步条件（如 API 校验）必须用 async/await 控制流程
如果跳转前要查接口（比如验证 token 是否过期），不能把 fetch 写在同步 if 里——它立刻返回 Promise，条件判断会永远为真。必须显式等待：
async function checkAndRedirect() {
const res = await fetch('/api/auth/status');
const data = await res.json();
if (data.expired) {
window.location.replace('/login?expired=1');
return;
}
if (data.role === 'guest') {
window.location.replace('/welcome');
return;
}
// 继续主流程...
}
忘了 await 或没处理 Promise 拒绝（catch），会导致跳转逻辑被跳过，用户停留在错误页面却无提示。
