window.history.back()是最简返回方案，兼容性好、响应快；需加window.前缀防报错；SPA中应优先使用框架路由的back方法；可结合history.length或document.referrer做降级处理。
用 window.history.back() 实现最简返回按钮
直接调用浏览器历史栈的后退动作，不依赖 URL 解析，兼容性好、响应快。适合绝大多数「点一下就回上一页」的场景。
常见错误是写成 window.history.go(-1) 或 history.back()（漏掉 window. 前缀），在某些严格模式或沙箱环境里会报 ReferenceError: history is not defined。
实操建议：
- 按钮绑定
onclick="window.history.back()"即可，无需额外判断 - 如果上一页不存在（比如用户从书签直接打开当前页），点击后无反应，不会报错 —— 这是正常行为
- 避免在单页应用（SPA）中滥用，Vue/React 路由有自己的导航逻辑，应优先用
router.back()或useNavigate()
加一层安全判断：检查 history.length 是否足够
有些用户会反复点返回，直到回到首页甚至空白页。用 history.length 可以粗略判断是否还有“上一页”可退 —— 注意它返回的是当前会话中的总记录数（含当前页），所以至少为 2 才能后退。
立即学习“前端免费学习笔记（深入）”；
示例写法：
<button onclick="if (window.history.length > 1) { window.history.back(); } else { window.location.href = '/'; }">返回</button>
注意：history.length 不可靠，比如 Chrome 隐私模式下可能恒为 1，且无法区分 iframe 导航或 pushState 插入的记录。仅作体验优化，不能替代业务逻辑判断。
服务端跳转 fallback：用 document.referrer 拼接链接
当 window.history 不可用（如禁用 JS、WebView 环境）或你想做纯 HTML 方案时，document.referrer 是唯一能拿到上一页地址的原生属性。
但它有明显限制：
- 跨域页面访问时为空字符串（例如从 https://google.com 点进来，
referrer就是空） - HTTP → HTTPS 页面也会被浏览器清空
- 用户手动输入 URL 或刷新后，值可能丢失
稳妥做法是作为降级方案配合使用：
<button onclick="const ref = document.referrer; if (ref && ref !== window.location.href) { window.location.href = ref; } else { window.history.back(); }">返回</button>
Vue/React 项目里别硬套原生 history.back()
现代框架路由（Vue Router、React Router v6+）接管了 URL 变更，直接调 window.history.back() 会绕过路由守卫、状态同步和组件生命周期，导致页面闪退、数据不同步或守卫失效。
正确姿势：
- Vue 3 + Vue Router 4：
import { useRoute, useRouter } from 'vue-router'; const router = useRouter(); router.back(); - React Router v6：
import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate(-1); - 不要在
useEffect或onMounted里自动触发back()，容易造成无限循环
真正难处理的是混合场景：比如 H5 页面嵌在微信 WebView 里，既要用路由 back，又要兼容右上角「返回」按钮的行为 —— 这时候得监听 popstate 并结合 performance.navigation.type（已废弃）或 navigation.currentEntry（新 API）做细粒度控制，但大多数项目其实只需要确保路由实例存在、调用正确即可。
