Angular使用router.navigate时如何保留URL中的问号符号

问题产生原因 #

出现URL字符被强制转义的核心原因是不符合Angular Router的参数传递规则：
当把拼接了?q=xxx的字符串作为单个路径片段传入router.navigate的数组参数时，框架会将数组内的每一项都视为纯路由路径片段，对片段中的所有特殊字符执行URL编码。这就导致作为查询参数分隔符的?被转义为%3F，等号被转义为%3D，完全失去查询参数的分隔作用。

正确实现方式 #

• 常规业务场景（需要将q作为URL查询参数传递）
  不要把查询字符串硬拼到路由路径中，严格拆分路径和查询参数的传递渠道。将查询参数从路径字符串中分离，通过navigate方法的第二个配置项（NavigationExtras）的queryParams字段传入即可，示例代码：

this.router.navigate(['/authenticated/search'], {
  queryParams: { q: value }
});

执行上述代码后生成的URL为标准格式/authenticated/search?q=实际参数值，框架会自动完成查询字符串的拼接与合规转义，不会将?识别为需要编码的普通路径字符。

• 特殊场景（需要将?作为路径的普通组成字符，而非查询参数分隔符）
  这类场景非常罕见，如果确实需要保留未编码的?作为路径的一部分，可以通过自定义路由的UrlSerializer调整默认的字符转义规则，但绝大多数业务场景都不需要使用该配置，优先使用queryParams的标准写法即可。

常见避坑提示 #

• 不要将带查询参数的完整URL字符串直接作为路径片段传入navigate的路由数组，所有查询参数、页面哈希值都需要通过NavigationExtras对应的配置项传递，不推荐手动拼接查询字符串。
• 如果使用模板中的routerLink指令实现导航，同样不要将?拼接在路由路径中，通过属性绑定[queryParams]="{q: value}"传递查询参数即可。

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