Angular12路由URL出现%2F等编码字符刷新报无法匹配路由错误

云原生阿岚

2026-9-29

这不是Angular12的已知问题，是你的代码实现和参数传递逻辑有误导致的。

你开启了useHash: true的哈希路由模式，Angular默认会把#之后的内容识别为路由路径。你当前地址栏的URL中#后第一个字符是!，且后续路径、参数都被URL编码，Angular无法匹配到对应的路由配置，所以刷新时会抛出匹配失败的错误。

问题触发点和解决方法

1. 路由跳转参数传递格式错误

router.navigate的第一个参数要求是路径片段数组，查询参数必须单独放在navigationExtras.queryParams字段中，不能直接拼在路径字符串里，否则Angular会自动对?、/等特殊字符做URL编码，出现你看到的%2F、%3F等编码字符。
错误示例：

// 错误写法
this.router.navigate(['/home?guid=xxx&screenId=xxx'])

正确写法：

// 正确写法：路径片段和查询参数分离
this.router.navigate(['/home'], {
  queryParams: {
    guid: 'c217-21f6-189f-8b69-a1a6',
    screenId: '3b3f2275-0ad4-48d6-bd76-8270cb9b9807'
  }
})

你可以在调用router.navigate前打印urlTree和navigationExtras的取值，确认参数格式符合要求。

2. 存在额外的哈希前缀配置

部分旧前端框架或第三方依赖会使用!作为哈希路由的前缀（即Hashbang模式），如果你的项目中有全局修改window.location.hash的逻辑，或者引入了相关依赖，需要删除对应的!前缀配置。
同时可以在路由配置中显式指定哈希前缀为空，避免被其他逻辑覆盖：

// app-routing.module.ts 修改
RouterModule.forRoot(routes, {
    useHash: true,
    hashPrefix: '', // 新增该行配置
    onSameUrlNavigation: 'reload',
    relativeLinkResolution: 'legacy',
    enableTracing: true
})