Angular嵌套路由问题：使用RouterLink导航视图不更新

问题场景 #

已配置Angular嵌套路由，父组件UserDashboardPageComponent包含<router-outlet>和左侧导航组件app-dashboard-navigation，通过自定义dashboard-nav-card组件的[routerLink]实现导航。点击导航时URL仅闪变，视图无更新，控制台无报错，期望跳转到/dashboard/official-exams、/dashboard/mock-exams等子路由。

路由配置：

{
    path: 'dashboard',
    component: UserDashboardPageComponent,
    title: 'xyz',
    children: [
      {
        path: '',
        component: DashboardSummaryComponent,
        title: 'Panel użytkownika',
      },
      {
        path: 'official-exams',
        component: OfficialMaturaExamsComponent,
        title: 'aaa',
      },
      {
        path: 'mock-exams',
        component: MockMaturaExamsComponent,
        title: 'bbb',
      },
      {
        path: 'exams-exercises',
        component: MaturaExamsExcercisesComponent,
        title: 'ccc',
      },
]
}

菜单配置：

menu: any[] = [
    {
      icon: 'tablerAtom',
      title: '',
      route: '/official-exams',
    },
    {
      icon: 'tablerPaperclip',
      title: '',
      route: '/mock-exams',
    },
    {
      icon: 'tablerNotebook',
      title: '',
      route: 'exams-exercises',
    },
  ];

解决步骤 #

1. 统一路由路径格式 #

菜单配置中的路由路径格式混乱，部分为绝对路径（带/）、部分为相对路径，导致路由匹配异常，需统一格式：

• 使用完整绝对路径：每个路由需包含父路由前缀，修正为：

  menu: any[] = [
      { icon: 'tablerAtom', title: '', route: '/dashboard/official-exams' },
      { icon: 'tablerPaperclip', title: '', route: '/dashboard/mock-exams' },
      { icon: 'tablerNotebook', title: '', route: '/dashboard/exams-exercises' },
  ];
  

• 使用相对路径：去掉路径开头的/，Angular会自动拼接当前父路由路径，修正为：

  menu: any[] = [
      { icon: 'tablerAtom', title: '', route: 'official-exams' },
      { icon: 'tablerPaperclip', title: '', route: 'mock-exams' },
      { icon: 'tablerNotebook', title: '', route: 'exams-exercises' },
  ];
  

2. 修正路由配置语法错误 #

原路由配置存在语法缺失，需补全children数组和路由对象的闭合符号：

{
    path: 'dashboard',
    component: UserDashboardPageComponent,
    title: 'xyz',
    children: [
      {
        path: '',
        component: DashboardSummaryComponent,
        title: 'Panel użytkownika',
      },
      {
        path: 'official-exams',
        component: OfficialMaturaExamsComponent,
        title: 'aaa',
      },
      {
        path: 'mock-exams',
        component: MockMaturaExamsComponent,
        title: 'bbb',
      },
      {
        path: 'exams-exercises',
        component: MaturaExamsExcercisesComponent,
        title: 'ccc',
      },
    ] // 补全children数组闭合
} // 补全路由对象闭合

3. 验证[routerLink]绑定正确性 #

确保自定义dashboard-nav-card组件中，[routerLink]正确绑定到菜单项的route属性，示例代码：

<div class="nav-card" [routerLink]="item.route">
  <i [class]="item.icon"></i>
  <span>{{ item.title }}</span>
</div>

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