如何在LinkedIn分享链接中保留URL哈希片段？

LinkedIn的shareArticle接口默认会丢弃URL中的哈希片段，这里提供一个无需额外API权限的前端可行方案：

方案：将哈希片段转为查询参数，页面加载时还原 #

核心思路是把原URL的哈希部分转成查询参数分享，用户打开链接后再由前端把查询参数转回哈希，既绕开LinkedIn的限制，又保留原哈希的功能。

1. 处理分享URL（Angular中）
   在组件里对当前页面URL进行转换，把哈希提取为查询参数：

   // 假设urlCurrentPage是原页面URL，比如"https://terabulk.com/en/product/test-price-entry#62e2d55a9e05867d94041eba"
   const urlObj = new URL(this.urlCurrentPage);
   const hashValue = urlObj.hash.slice(1); // 去掉开头的#
   urlObj.hash = ''; // 清空原哈希
   urlObj.searchParams.set('hash', hashValue); // 添加查询参数
   this.shareUrl = urlObj.toString(); // 得到处理后的分享URL：https://terabulk.com/en/product/test-price-entry?hash=62e2d55a9e05867d94041eba
   

2. 更新分享按钮代码
   把原url={{urlCurrentPage}}替换为处理后的shareUrl：

   <a href="https://www.linkedin.com/shareArticle?mini=true&title={{currentProduct.title}}&summary={{currentProduct.title}}&url={{shareUrl}}" #li></a>
   

3. 在产品页还原哈希
   在产品页的组件初始化逻辑中，检查查询参数并还原哈希：

   import { ActivatedRoute, Router } from '@angular/router';
   
   // 组件构造函数注入依赖
   constructor(private route: ActivatedRoute, private router: Router) {}
   
   ngOnInit(): void {
     const hashParam = this.route.snapshot.queryParamMap.get('hash');
     if (hashParam) {
       // 设置页面哈希
       window.location.hash = hashParam;
       // 可选：移除URL中的查询参数，让地址栏更干净
       this.router.navigate([], {
         queryParams: { hash: null },
         queryParamsHandling: 'merge'
       });
     }
   }
   

为什么之前的方法没用？ #

• TinyURL缩短链接：LinkedIn解析缩短后的目标URL时，依然会丢弃哈希片段，所以无效。
• encodeURIComponent编码：LinkedIn的接口会自动解码并解析URL，最终还是会忽略哈希部分，因此单纯编码无法解决问题。

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