如何实现Screen C识别用户来源页面并展示对应背景色

核心原则：不要依赖系统自带的来源记录（比如Web端的referrer、路由栈默认返回的上一页路径）做判断，这类数据很容易受用户直接访问、回退操作、浏览器安全策略拦截影响，判断准确率极低。最稳定的实现思路是：跳转时主动携带来源标识，Screen C加载时读取标识匹配对应样式即可。

具体实现步骤 #

1. 给两个来源页的跳转逻辑加标识参数 #

无论你用什么技术栈，从Screen A、Screen B触发跳转到Screen C的逻辑里，都要追加来源标记：

• Web多页/服务端渲染场景：直接在跳转链接后拼接查询参数，Screen A跳转目标为screenC.html?from=screenA，Screen B跳转目标为screenC.html?from=screenB
• 单页应用（Vue/React等）：路由跳转时把来源标识存在路由参数/路由状态中，例如Vue Router可传router.push({path:'/screenC', query:{from:'screenA'}})，React Router可传navigate('/screenC', {state:{from:'screenA'}})
• 移动端原生/跨端场景（Android/iOS/Flutter/React Native）：在导航跳转的传参对象里追加from字段，和其他跳转参数一起传给Screen C

2. Screen C初始化时读取参数、设置对应背景色 #

在Screen C的页面初始化生命周期（Web端的DOM加载完成、框架的onMounted/useEffect、原生端的页面创建回调）里执行判断逻辑：

• 先读取跳转时携带的from参数值
• 匹配规则设置样式：参数值为screenA时页面背景设为红色，参数值为screenB时设为蓝色
• 建议加兜底逻辑：参数不存在/不匹配时设置默认背景色，避免样式异常

原生Web场景示例代码 #

Screen A的跳转按钮逻辑：

<button onclick="location.href='screenC.html?from=screenA'">前往Screen C</button>

Screen B的跳转按钮逻辑：

<button onclick="location.href='screenC.html?from=screenB'">前往Screen C</button>

Screen C的初始化逻辑：

window.addEventListener('DOMContentLoaded', () => {
  // 解析URL中的来源参数
  const searchParams = new URLSearchParams(location.search)
  const sourcePage = searchParams.get('from')
  const rootEl = document.body

  // 匹配来源设置背景
  switch (sourcePage) {
    case 'screenA':
      rootEl.style.backgroundColor = 'red'
      break
    case 'screenB':
      rootEl.style.backgroundColor = 'blue'
      break
    default:
      // 兜底默认样式
      rootEl.style.backgroundColor = '#f5f5f5'
  }
})

避坑提示：如果用读取上一页路由的方案实现，遇到用户直接输入地址打开Screen C、从其他页面回退到Screen C、浏览器开启隐私模式截断referrer的场景时，判断逻辑会直接失效，主动传参是兼容性、准确率最高的方案。

内容的提问来源于stack exchange，提问作者Nomel