Angular子路由点击导航后立即重定向至父路由问题求助

看起来你遇到了挺诡异的路由问题：手动输URL能正常访问子路由，但通过导航卡片点击后立刻跳回父路由，还没报错。我之前也碰过类似的情况，咱们一步步来排查：

1. 先排查子路由组件的"误导航"低级错误 #

最容易踩的坑：检查你的子路由组件（比如OfficialMaturaExamsComponent、MockMaturaExamsComponent这些）的生命周期钩子（比如ngOnInit）里，有没有不小心写了this.router.navigate(['/dashboard'])这类导航代码？我之前测试时加了一行这种代码忘记删，就导致一进子路由立刻跳回父路由，虽然你说手动输URL能进，但还是先排除这个最直观的可能性。

2. 试试修改routerLink的路径格式 #

你的导航卡片用的是[routerLink]="route"，其中route是字符串格式的相对路径（比如'official-exams'）。理论上在父路由页面的组件里用相对路径是没问题的，但Angular的相对路径有时候会因为组件注入上下文出问题，你可以两种方式试试：

• 把menu里的路由改成相对路径数组：

  menu: any[] = [
    {
      icon: 'tablerAtom',
      title: 'Arkusze maturalne',
      route: ['./official-exams'], // 用数组形式的相对路径
    },
    // 其他项同理修改
  ];
  

• 或者直接用绝对路径绑定：

  [routerLink]="['/dashboard', route]"
  

如果改成绝对路径后正常了，那说明是相对路径的上下文出了问题。

3. 开启路由追踪，看清楚跳转全过程 #

这是排查路由问题的终极利器！在你的路由模块（比如app-routing.module.ts）里启用路由追踪：

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

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      enableTracing: true, // 开启这个配置
      // 你的其他路由配置
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

然后打开浏览器控制台，点击导航卡片，你会看到所有路由事件的日志：

• 正常情况下会先看到NavigationStart(id: x, url: '/dashboard/official-exams')
• 如果紧接着出现了NavigationStart(id: x+1, url: '/dashboard')，那就能明确是哪一步触发了第二次跳转（可能是守卫、组件代码、甚至隐藏的重定向配置）。

4. 检查父路由的子路由配置 #

确认下你的dashboard路由的children里，有没有不小心加了空路径的重定向？比如类似这种错误配置：

{
  path: 'dashboard',
  component: UserDashboardPageComponent,
  title: 'Panel',
  children: [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, // 这种错误重定向会导致跳转循环
    // ...你的子路由项
  ]
}

不过你手动输URL能进，这个可能性偏低，但还是确认下更稳妥。

5. 排查路由守卫的影响 #

虽然你说手动输URL能进，但还是看看dashboard或者子路由有没有配置CanActivate/CanActivateChild这类守卫？有没有守卫里的逻辑导致导航后又跳回父路由？比如守卫里判断某些状态不满足，就导航回dashboard，但手动输URL时状态刚好满足？这个概率不高，但也别漏掉。

备注：内容来源于stack exchange，提问作者user28273827332