Angular 12路由编码异常：路由未按预期工作

以下是针对路由跳转异常问题的排查和解决方向：

1. 检查base href配置 #

打开项目根目录下的index.html，确认<base>标签的href属性是否正确设置为根路径：

<base href="/">

如果base href被错误设置为/#或其他包含哈希的路径，会导致Angular在处理路由时错误编码#符号。

2. 验证路由模式配置 #

查看AppRoutingModule中RouterModule.forRoot的配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })], // 若使用哈希模式
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 若使用哈希模式（useHash: true），routerLink无需手动添加/#，Angular会自动拼接哈希前缀，你当前的routerLink="/app-terminal-request-list"写法是正确的。
• 若使用路径模式（默认无useHash配置），需确保服务器已配置HTML5模式的路由重写，但这一般不会导致跳转时编码#的问题。

3. 排查自定义URL序列化器 #

如果项目中自定义了UrlSerializer处理URL，升级到Angular 12后可能存在兼容性问题。检查自定义序列化器的实现，确保它正确处理URL中的哈希部分，避免错误编码#：

@Injectable()
export class CustomUrlSerializer implements UrlSerializer {
  private defaultSerializer: UrlSerializer = new DefaultUrlSerializer();

  parse(url: string): UrlTree {
    // 确保此处未错误编码#
    return this.defaultSerializer.parse(url);
  }

  serialize(tree: UrlTree): string {
    // 确保序列化时正确处理哈希
    return this.defaultSerializer.serialize(tree);
  }
}

若自定义序列化器存在问题，可暂时移除它，测试路由是否恢复正常。

4. 检查第三方指令的干扰 #

你代码中的<li>标签使用了[hasAccess]自定义指令，该指令可能在DOM操作或事件处理中干扰routerLink的正常行为。尝试暂时移除[hasAccess]指令，测试点击跳转是否正常，以排除该指令的影响。

5. 确认依赖版本一致性 #

确保项目中所有Angular相关依赖（尤其是@angular/router）都已升级到12.x版本，避免版本不一致导致的路由行为异常。可通过package.json检查版本，或运行npm list @angular/router确认。

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