最简跳转用onclick=”window.location.assign(‘/path’)”，但SPA需用router.push()；权限/网络校验须前置，避免无效跳转。
button onclick 跳转最简写法
直接在 上写 onclick 是最快的方式，适合静态跳转或简单判断。但别写成 onclick="window.location.href = 'xxx'" 这种裸字符串拼接——容易被 xss 利用，也难维护。
- 推荐用
window.location.assign()替代赋值href，语义更清晰，且不会意外触发页面重载（比如在某些 iframe 场景下） - 如果目标是新标签页，用
window.open(url, '_blank')，但注意浏览器可能拦截，尤其没用户手势触发时 - 避免在
onclick里写多行逻辑，超过两行就该抽到函数里
示例：
addEventListener 绑定跳转更可控
当需要复用逻辑、做权限校验、或和表单/状态联动时，addEventListener 是唯一靠谱的选择。它能自然接入事件对象，也能配合 preventDefault() 阻止默认行为。
- 必须用
event.preventDefault()拦住的表单提交，否则跳转前会先发请求 - 不要漏掉
return false的旧写法——它在现代事件监听里无效，纯属误导 - 绑定前检查元素是否存在，否则控制台报
Cannot read Property 'addEventListener' of NULL
示例：
document.querySelector('#go-profile').addEventListener('click', function(e) {
e.preventDefault();
if (user.isLoggedIn) {
window.location.assign('/profile');
} else {
window.location.assign('/login?from=profile');
}
});立即学习“前端免费学习笔记（深入）”；
router.push() 在单页应用里不能用 location.assign
如果你用的是 vue Router、react Router 或 SvelteKit，直接改 window.location 会绕过路由系统，丢失状态、不触发守卫、也不更新 URL 状态管理器里的 history stack。
-
vue router 4+用router.push('/path')，记得先import { useRouter } from 'vue-router' -
React Router v6+必须用useNavigate()hook，不能在普通函数里调用 - 服务端渲染（SSR）场景下，跳转前要确认是否在客户端环境，否则
router.push()会报Cannot read property 'pushState' of undefined
错误示范：window.location.assign('/settings') —— 在 SPA 里等于“硬刷新”，丢了所有内存状态。
跳转前校验权限或网络状态容易被忽略
按钮点击后立刻跳转，是常见盲区。用户点下去的瞬间，未必有登录态、未必联网、未必加载完权限配置。直接跳过去，大概率进 403 或白屏。
- 跳转前加
if (!navigator.onLine)提示“请检查网络”，比跳到一半卡住友好得多 - 权限判断别只靠前端隐藏按钮，后端仍需校验；但前端至少该拦截无效点击，避免空请求
- 异步校验（如调 API 检查角色）完成后才跳转，要用
async/await+try/catch，别让失败静默吞掉
最常被跳过的一步：跳转前清空表单草稿或弹出确认框。用户点了“删除后返回列表”，结果跳走时未保存编辑，这种体验断层很难回溯。