如何解决使用useHash路由策略时Angular页面刷新及分享URL丢失问题

Hash路由的核心逻辑是#及之后的片段默认不会发送到服务端，你遇到的服务端删除#后内容的问题，本质是分享链接的生成/传递逻辑问题，按以下方案处理即可，不需要调整现有UseHash路由配置：

方案1：前端生成分享链接时对Hash部分做转义封装 #

• 生成分享链接前，将完整Hash路径（包含#）进行URL编码，作为查询参数附加到基础服务端地址后
• 示例代码：

// 假设当前页面地址为 https://yourdomain.com/#/user/123?tab=profile
const baseUrl = window.location.origin + window.location.pathname;
const hashPart = window.location.hash;
const shareUrl = `${baseUrl}?hash=${encodeURIComponent(hashPart)}`;
// 最终生成的分享链接为 https://yourdomain.com?hash=%23%2Fuser%2F123%3Ftab%3Dprofile

• 应用初始化时，在AppComponent或者路由守卫中检测URL的hash查询参数，存在的话直接替换当前页面hash，触发Angular路由跳转：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit(): void {
    const encodedHash = this.route.snapshot.queryParamMap.get('hash');
    if (encodedHash) {
      const rawHash = decodeURIComponent(encodedHash);
      // 清除查询参数避免重复触发，同时跳转到对应hash路由
      window.location.hash = rawHash;
      this.router.navigate([], {
        queryParams: { hash: null },
        queryParamsHandling: 'merge'
      });
    }
  }
}

方案2：调整服务端配置保留Hash片段 #

• Hash片段原本不会发送到服务端，出现裁剪大概率是前端跳转时将Hash拼到了路径部分触发了服务端错误的重写规则，仅需要删除服务端强制裁剪#后内容的重写规则即可
• Nginx配置调整示例：

location / {
  try_files $uri $uri/ /index.html;
  # 不要添加任何裁剪#后内容的rewrite规则
}

方案3：使用自定义短链接服务中转 #

• 搭建内部短链接生成服务，前端将完整带Hash的页面地址提交给短链接服务存储，生成不包含Hash的短链接用于分享
• 用户访问短链接时，服务端直接返回302跳转到存储的完整带Hash的原始地址，Hash片段会被浏览器完整保留传递给Angular应用

注意：所有方案都不需要修改你现有的UseHash路由配置，完全兼容现有业务逻辑。

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