应先判断 history.length > 1 再执行 history.back()，避免静默失败；不推荐 location.href = "javascript:history.back()" 因其引发重载和状态丢失；vue/react 中需封装历史感知能力而非仅调用 back()；webview 中需原生层配合才能生效。
用 history.back() 实现按钮回退，但要注意执行时机
直接在按钮 onclick 里写 history.back() 多数情况下能用，但前提是当前页面确实有可回退的历史条目。如果用户刚打开标签页、或历史栈只有当前页（history.length === 1），调用后不会报错，但页面无反应——这不是 bug，是浏览器行为正常。
实操建议：
- 先用
history.length > 1判断是否安全回退，避免“点一下没反应”带来的困惑 - 不要依赖
history.state是否为null来判断——它可能为空但仍有可回退项 - 若需更可靠控制，可用
history.go(-1)替代，语义和行为与back()一致，但部分旧版 Safari 对back()有兼容性问题
为什么 location.href = "javascript:history.back()" 不推荐
这种写法看似简洁，实际会触发页面重载级别的跳转行为，在某些场景下导致重复提交表单、丢失未保存的表单状态，甚至触发两次 popstate 事件。
常见错误现象：
- 点击按钮后页面闪一下再回退（其实是先跳到空 JS URL，再由 JS 执行回退）
- Vue/React 应用中，
history.back()被拦截或延迟，而这个伪协议方式绕过路由守卫，破坏应用状态一致性 - Strict 模式下，部分浏览器拒绝执行内联 javascript: 协议
React/Vue 项目里该不该封装成自定义 hook 或组件
应该封装，但别只封装 history.back() 这一行。真正需要的是对历史栈状态的感知和响应能力。
使用场景决定封装粒度：
- 纯导航按钮：只需加
if (history.length > 1) history.back()防静默失败 - 带返回逻辑的表单页：需监听
popstate，并在组件卸载前清理副作用，否则可能触发已销毁组件的 setState - 需要“返回上一页但跳过某类中间页”时：得结合
history.state标记和history.go(n)手动偏移，不能只靠back()
移动端 WebView 中 history.back() 失效的典型原因
不是 JS 问题，而是宿主环境主动禁用了原生导航栈。比如 Android 的 WebView 默认不维护历史记录，除非显式启用：webView.getSettings().setJavaScriptEnabled(true) 和 webView.getSettings().setSupportMultipleWindows(true) 并不足够。
关键配置：
- 必须调用
webView.setNavigationCallback(...)（AndroidX）或重写shouldOverrideUrlLoading，并确保goBack()被调用 - iOS WKWebView 中，若页面由
loadHTMLString加载且未指定 base URL，history可能为空，此时back()无效 - Hybrid 场景下，前端调用
history.back()后，需 Native 层同步调用goBack()，否则只是 JS 层“以为”回退了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
