Angular 13路由匹配失败：点击文件无法跳转详情页求助

1. 核对路由配置的正确性 #

首先确认路由配置里是否正确定义了带参数的详情页路由，参数占位符格式要准确：

const routes: Routes = [
  // 其他路由
  { path: 'fichiers/:id', component: FichierDetailComponent }, // 必须带:id参数占位符
  { path: 'dossiers/:id', component: DossierDetailComponent }
];

• 确保参数名（比如:id）和跳转时传递的参数名完全一致
• 确认路由已注册到对应模块（AppRoutingModule或功能模块），懒加载模块要避免路径冲突
• 通配符路由（**）必须放在所有路由最后，否则会拦截正常的详情页路由

2. 修正列表跳转逻辑 #

模板跳转（routerLink） #

必须用方括号绑定动态参数，不能直接写死字符串：

<!-- 错误写法：无参数或未绑定变量 -->
<a routerLink="/fichiers">查看详情</a>

<!-- 正确写法：动态拼接路径与参数 -->
<a [routerLink]="['/fichiers', fichier.id]">查看详情</a>
<!-- 文件夹详情页同理 -->
<a [routerLink]="['/dossiers', dossier.id]">查看详情</a>

组件内代码跳转（Router.navigate） #

调用navigate时用数组格式传递路径和参数，确保参数值有效：

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

constructor(private router: Router) {}

goToFichierDetail(fichier: Fichier) {
  // 正确写法：数组形式传递路径片段
  this.router.navigate(['/fichiers', fichier.id]);
  // 避免直接字符串拼接，防止参数为undefined时生成无效路径
}

3. 确认详情页参数接收逻辑 #

虽然不会直接导致路由匹配错误，但需确保参数能正常接收：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const fichierId = params.get('id');
    // 根据id拉取详情数据
  });
}

4. 检查实际跳转的URL #

点击文件后查看浏览器地址栏：

• 如果URL是/fichiers/（无id）：说明参数未正确传递，检查fichier.id是否有值
• 如果URL是/fichier/123（拼写错误）：修正路径拼写为fichiers
• 如果URL是/fichiers/undefined：确认文件对象的id属性是否存在且有效

5. 排查路由守卫影响 #

如果配置了CanActivate等路由守卫，确认守卫逻辑没有阻止跳转至详情页，或调整守卫规则放行合法的详情页路径。

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