最稳妥的方式是在跳转时主动带标识，如加查询参数?from=h5或存sessionstorage.setitem('jump_origin','h5')，目标页读取后立即清理，而非依赖不可靠的document.referrer或已废弃的window.performance.navigation。
怎么确认当前页面是 H5 页面跳转来的
浏览器本身不提供“这个页面是被跳转来的”这种元信息，window.performance.navigation 已废弃，document.referrer 又不可靠（空、被屏蔽、跨域截断），所以得靠你自己埋点或传参。
最稳妥的方式，是在跳转时主动带标识：
- 用
location.href或router.push时加查询参数，比如?from=h5或?source=mobile - 跳转前存
sessionStorage，比如sessionStorage.setItem('jump_origin', 'h5')，目标页读取后立即清理 - 如果走的是 WebView 容器（如微信、支付宝），可用 JSBridge 检查
WebViewJavascriptBridge或AlipayJSBridge是否存在，但这是环境判断，不是“跳转行为”判断
为什么 document.referrer 不靠谱
它只反映上一个 URL，但很多情况会为空或失真：
- 从 HTTPS 跳到 HTTP 时，浏览器按安全策略清空
referrer - 用户手动输入地址、书签打开、从桌面快捷方式启动，
referrer都为空 - 某些 Android WebView 或小程序内嵌页，跳转后
referrer固定为"about:blank"或容器域名 - 设置了
Referrer-Policy: no-referrer的源站，下游页面永远拿不到真实来源
Vue/React 单页应用里怎么识别首次跳转来源
SPA 路由切换不刷新页面，document.referrer 和地址栏参数不会自动更新，必须在“真正页面加载完成”那一刻抓取。
立即学习“前端免费学习笔记（深入）”；
关键时机是：
- Vue：在
mounted()或onMounted()里读location.search，别在created()—— 此时 DOM 还没挂载，但参数已存在 - React：用
useEffect(() => { /* 读 search */ }, [])，依赖数组为空，确保只执行一次 - 注意：如果用了 SSR（如 Nuxt/Next），服务端渲染阶段无法访问
location，需用process.client或typeof window !== 'undefined'做保护
容易忽略的兼容性坑
有些看似简单的判断，在低端 Android 或旧版 iOS WebView 里会失效：
-
sessionStorage在某些 UC 浏览器私密模式下直接报错，要用try/catch包裹 -
URLSearchParams在 iOS 10.3 以下不支持，解析location.search得手写正则或用 polyfill - 微信内置浏览器对
history.state支持不稳定，别依赖history.pushState({ from: 'h5' })传参 - 如果跳转来自 App 内 WebView，且 App 没配好 User-Agent，你可能根本分不清是 H5 还是 PC 端——得和服务端联调确认 UA 规则
真正能落地的方案，永远是“跳转方负责声明，目标页负责解析”，而不是猜。参数传错、没清理 sessionStorage、忘了 SSR 判断，这三件事占了八成线上问题。
