Angular项目中如何避免浏览器自动URL编码导致面包屑导航失效

API返回解码后的路径 gamme_utilitaire.php?marque=CITROEN，但浏览器自动将其编码为 gamme_utilitaire.php%3Fmarque%3DCITROEN，导致面包屑无法识别路径。以下是几种可行的解决思路：

• 手动解码后传递路径
  获取API返回的路径后，先用decodeURIComponent()解码，再将处理后的路径传给面包屑组件或路由导航逻辑：

  // 假设apiPath是从接口拿到的路径
  const decodedPath = decodeURIComponent(apiPath);
  // 将decodedPath传入面包屑组件的路径参数
  

• 修改面包屑组件的匹配逻辑
  如果面包屑是自研组件，直接在其路径识别逻辑中加入解码步骤，基于解码后的路径匹配面包屑项：

  // 面包屑组件内的路径处理方法
  generateBreadcrumbs(path: string): Breadcrumb[] {
    const decodedPath = decodeURIComponent(path);
    // 基于decodedPath进行面包屑项的匹配与生成
    // ...后续逻辑
  }
  

• 自定义Angular URL序列化器
  Angular默认的UrlSerializer会自动编码URL，你可以自定义序列化器，让应用内部使用解码后的路径：

  import { UrlSerializer, DefaultUrlSerializer, UrlTree } from '@angular/router';
  
  export class CustomUrlSerializer implements UrlSerializer {
    private defaultSerializer = new DefaultUrlSerializer();
  
    parse(url: string): UrlTree {
      const decodedUrl = decodeURIComponent(url);
      return this.defaultSerializer.parse(decodedUrl);
    }
  
    serialize(tree: UrlTree): string {
      const url = this.defaultSerializer.serialize(tree);
      return decodeURIComponent(url);
    }
  }
  

  然后在AppModule中注册这个自定义序列化器：

  @NgModule({
    providers: [
      { provide: UrlSerializer, useClass: CustomUrlSerializer }
    ]
  })
  export class AppModule { }
  

• 注意浏览器地址栏的限制
  浏览器地址栏本身会强制显示编码后的URL，这是浏览器的默认行为无法更改，但只要应用内部逻辑使用解码后的路径，就不会影响面包屑的识别功能。

内容的提问来源于stack exchange，提问作者Farouk Mhamdi