Angular路由匹配失败：无法获取key与type路由参数问题

核心问题分析 #

1. 路由路径不匹配：你配置的路由是/friends/message/:key/:type，但实际访问的是/friend/messages/NzY4OQ==/inbox，两者在单复数（friends vs friend）、路径名称（message vs messages）上存在差异，导致路由无法匹配。
2. Base64参数被截断：NzY4OQ==是Base64编码字符串，包含==符号，Angular路由默认会将=视为URL分隔符，导致key参数被截断为NzY4OQ，进而无法正确识别后续的type参数。

解决步骤 #

1. 修正路由路径匹配 #

将路由配置的路径调整为与访问路径完全一致，或者修改访问路径匹配已配置的路由：

• 若保留访问路径/friend/messages/:key/:type，更新路由配置：

  const routes: Routes = [
    // 其他路由
    {
      path: 'friend/messages/:key/:type',
      component: MessageComponent
    }
  ];
  

• 若保留原路由配置/friends/message/:key/:type，则访问路径需改为/friends/message/NzY4OQ==/inbox。

2. 处理Base64参数截断问题 #

针对包含特殊字符的参数，推荐两种处理方式：

方式一：URL编码/解码参数

在导航前对key参数进行URL编码，确保特殊字符被正确传递：

// 导航时编码参数
const base64Key = 'NzY4OQ==';
const encodedKey = encodeURIComponent(base64Key);
this.router.navigate(['/friend/messages', encodedKey, 'inbox']);

在MessageComponent中获取参数时解码：

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

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const encodedKey = this.route.snapshot.paramMap.get('key');
  const key = encodedKey ? decodeURIComponent(encodedKey) : '';
  const type = this.route.snapshot.paramMap.get('type') || '';
  
  // 使用key和type参数进行后续逻辑处理
}

方式二：自定义路由匹配器

通过自定义匹配器，让路由完整捕获包含特殊字符的参数：

import { Routes, UrlSegment, UrlMatcher } from '@angular/router';

// 自定义匹配器
const messageRouteMatcher: UrlMatcher = (url) => {
  // 匹配/friend/messages/xxx/xxx结构的路径
  if (url.length === 4 && url[0].path === 'friend' && url[1].path === 'messages') {
    return {
      consumed: url,
      posParams: {
        key: new UrlSegment(url[2].path, {}),
        type: new UrlSegment(url[3].path, {})
      }
    };
  }
  return null;
};

// 路由配置
const routes: Routes = [
  {
    matcher: messageRouteMatcher,
    component: MessageComponent
  }
];

这种方式无需编码解码，路由会直接完整捕获key和type参数。

3. 验证测试 #

完成上述调整后，访问目标路径即可正常匹配路由，并正确获取key和type参数。

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