Angular加密URL路由异常：带等号路由跳转到404页面如何修复

API 探路者

2026-7-2

解决方案

1. 对路由参数做URL编码

问题核心是encryptedKey里的==属于URL保留字符，直接放在路径里会被浏览器/路由解析截断。生成跳转URL时，用encodeURIComponent()对密钥编码：

// 生成跳转链接的代码示例
const encryptedKey = 'NjgzMw==';
const encodedKey = encodeURIComponent(encryptedKey);
this.router.navigate(['/friend/messages', encodedKey, 'inbox']);

编码后的URL会变成 baseUrl/friend/messages/NjgzMw%3D%3D/inbox，Angular路由能正确匹配friend/messages/:encryptedKey/:type规则，不会跳转到404。

2. 在目标组件解码参数

进入EncryptedRouteComponent后，用decodeURIComponent()还原原始密钥：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const encryptedKey = decodeURIComponent(this.route.snapshot.paramMap.get('encryptedKey')!);
  // 后续密钥解密业务逻辑
}

3. 在404组件修复异常导航

如果用户直接访问未编码的URL导致跳转到404，可在PageNotFoundComponent中获取浏览器完整路径，解析后重新导航：

import { Router } from '@angular/router';

constructor(private router: Router) {}

ngOnInit(): void {
  // 获取浏览器地址栏的完整路径
  const fullPath = window.location.pathname;
  // 匹配目标路由格式
  const routePattern = /^\/friend\/messages\/(.*)\/(inbox|outbox)$/;
  const matchResult = fullPath.match(routePattern);

  if (matchResult) {
    const rawKey = matchResult[1];
    const type = matchResult[2];
    // 编码参数后跳转正确路由
    const encodedKey = encodeURIComponent(rawKey);
    this.router.navigate(['/friend/messages', encodedKey, type]);
  }
}