最简跳转用onclick=”window.location.assign(‘/path’)”，但spa需用router.push()；权限/网络校验须前置，避免无效跳转。
button onclick 跳转最简写法
直接在 <button></button> 上写 onclick 是最快的方式，适合静态跳转或简单判断。但别写成 onclick="window.location.href = 'xxx'" 这种裸字符串拼接——容易被 XSS 利用，也难维护。
- 推荐用
window.location.assign()替代赋值href，语义更清晰，且不会意外触发页面重载（比如在某些 iframe 场景下） - 如果目标是新标签页，用
window.open(url, '_blank')，但注意浏览器可能拦截，尤其没用户手势触发时 - 避免在
onclick里写多行逻辑，超过两行就该抽到函数里
示例：
<button onclick="window.location.assign('/dashboard')">进后台</button>
addEventListener 绑定跳转更可控
当需要复用逻辑、做权限校验、或和表单/状态联动时，addEventListener 是唯一靠谱的选择。它能自然接入事件对象，也能配合 preventDefault() 阻止默认行为。
- 必须用
event.preventDefault()拦住<button type="submit"></button>的表单提交，否则跳转前会先发请求 - 不要漏掉
return false的旧写法——它在现代事件监听里无效，纯属误导 - 绑定前检查元素是否存在，否则控制台报
Cannot read property 'addEventListener' of null
示例：
document.querySelector('#go-profile').addEventListener('click', function(e) {<br> e.preventDefault();<br> if (user.isLoggedIn) {<br> window.location.assign('/profile');<br> } else {<br> window.location.assign('/login?from=profile');<br> }<br>});
立即学习“前端免费学习笔记（深入）”；
