重定向后保留原始Referrer URL的技术方案咨询

我的Web应用会在加载时把查询参数转换为哈希路由，当前实现代码如下：

var url = "https://www.example.com/home?page=admin";
var urlObj = new URL(url);

var pageParam = urlObj.searchParams.get("page");

if (pageParam) {
   window.open(window.location.origin + "/home/#/" + pageParam);
}

但这么做会导致Referrer被覆盖，流程如下：

https://www.google.com/
--> https://www.example.com/home?page=admin
--> https://www.example.com/home/#/admin
    (Referrer: https://www.example.com/home?page=admin)

需要保留原始的Google Referrer，用于分析工具捕获。

你当前用window.open会触发一次新的页面导航，浏览器会把这次导航的来源设置为前一个页面（也就是带查询参数的home?page=admin），自然会覆盖原始Referrer。

正确的做法是用history.replaceState来修改URL，这个API只会更新浏览器地址栏的URL，不会发起新的HTTP请求，也就不会改变Referrer：

var urlObj = new URL(window.location.href);
var pageParam = urlObj.searchParams.get("page");

if (pageParam) {
  // 构造目标哈希路由URL
  var targetUrl = window.location.origin + "/home/#/" + pageParam;
  // 用replaceState修改URL，不触发跳转
  history.replaceState({}, document.title, targetUrl);
  
  // 如果你的单页路由需要手动触发更新（比如React Router/Vue Router），这里可以加对应框架的路由跳转逻辑
  // 比如React Router的useNavigate()或者Vue Router的$router.replace()
}

这样修改后，页面不会刷新，地址栏变成哈希路由格式，而Referrer仍然是最初的https://www.google.com/，完全满足分析工具的需求。

另外要注意：如果你的单页路由框架本身支持从查询参数初始化路由，优先用框架自带的方案，比如配置路由规则自动解析查询参数，这样更符合框架的设计规范。

内容的提问来源于stack exchange，提问作者Adnan Arif Sait