history.back() 没反应的主因是 history 栈为空，应先判断 history.length > 1 再执行，否则跳转首页；单页应用推荐用路由库 api 如 router.back() 或 navigate(-1)，避免绕过守卫。
点击按钮触发 history.back() 为什么没反应？
常见原因是当前会话中 history 栈为空（比如用户直接打开该页面、或从书签进入），调用 history.back() 不会报错但也不执行跳转。浏览器控制台也看不到错误，容易误以为代码失效。
- 先检查
history.length是否 ≥ 2（当前页 + 至少一页历史才可回退） - 更稳妥的做法是加判断：
if (history.length > 1) { history.back(); } else { window.location.href = '/'; } - 注意：单页应用（如 Vue/React 路由）中，
history.back()触发的是路由库的内部导航，不是原生 history，行为可能受router配置影响
用 <button></button> 还是 <a></a> 实现返回按钮？
优先用 <button></button>，语义更准确，且避免默认跳转干扰。若用 <a href="javascript:void(0)"></a>，需防止点击后触发空链接行为或屏幕滚动。
-
<button type="button" onclick="history.back()">返回</button>—— 最简可靠 - 避免写成
<a href="#" onclick="history.back(); return false;"></a>，#可能导致页面顶部跳动 - 如果按钮需支持键盘操作（如回车），
<button></button>原生支持Enter和Space触发，<a></a>需额外处理
history.back() 在 iOS Safari 中偶尔失效怎么办？
iOS Safari 对 history 栈管理较严格，尤其在 PWA 或添加到主屏幕后，首次加载页面时 history.length 可能为 1，即使用户是从其他页点进来的。
- 不要依赖
history.state是否为null判断——它常为null即使有历史 - 可用
document.referrer作兜底：if (document.referrer) { location.href = document.referrer; } else { history.back(); } - 注意：
document.referrer在跨域或隐私模式下可能为空，不能单独依赖
如何让返回按钮兼容 Vue Router / React Router？
在现代前端框架中，直接调用原生 history.back() 通常仍有效，但推荐使用对应路由库的 API，确保状态和生命周期同步。
- Vue Router 3：
this.$router.go(-1)；Vue Router 4：router.back()（需先import { useRouter } from 'vue-router'） - React Router v6：
import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate(-1); - 混合使用时（如嵌入式页面），建议统一用路由库方法，避免原生
history.back()绕过路由守卫或未触发beforeRouteLeave等钩子
history.back() 当成“绝对安全”的黑盒——它不抛错、不提示、不兜底，只默默失败。多一层判断，比事后排查用户说“点返回没反应”省半小时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
