路由器立即重定向

Question

我有一个路线配置：

{
    path: 'dashboard',
    component: UserDashboardPageComponent,
    title: 'Panel',
    children: [
      {
        path: 'summary',
        component: DashboardSummaryComponent,
        title: 'Podsumowanie',
      },
      {
        path: 'official-exams',
        component: OfficialMaturaExamsComponent,
        title: 'Arkusze maturalne',
      },
      {
        path: 'mock-exams',
        component: MockMaturaExamsComponent,
        title: 'Próbne matury',
      },
      {
        path: 'exams-exercises',
        component: MaturaExamsExcercisesComponent,
        title: 'Zadania maturalne',
      }...

然后我有一个带有路由器插座的页面：

<section class="flex h-[100vh]">
  <app-dashboard-navigation class="min-w-[20rem]"></app-dashboard-navigation>
  <router-outlet></router-outlet>
</section>

要导航，我有一张卡：

<div
  class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
  [routerLink]="route"
>
  <ng-icon
    class="text-3xl group-hover:text-cyan-600 transition-all duration-300"
    [name]="icon"
  ></ng-icon>
  <p
    class="text-xl font-bold group-hover:text-cyan-600 transition-all duration-300"
  >
    {{ title }}
  </p>
</div>

然后：

@for(opt of menu; track opt){
    <app-dashboard-nav-card
      [icon]="opt.icon"
      [title]="opt.title"
      [route]="opt.route"
    ></app-dashboard-nav-card>
    }

从项目列表中：

  menu: any[] = [
    {
      icon: 'tablerAtom',
      title: 'Arkusze maturalne',
      route: 'official-exams',
    },
    {
      icon: 'tablerPaperclip',
      title: 'Arkusze próbne',
      route: 'mock-exams',
    },
    {
      icon: 'tablerNotebook',
      title: 'Zadania maturalne',
      route: 'exams-exercises',
    },
  ];

问题是，当我通过导航栏输入

official-exams

（仪表板/官方考试）时，我会立即重定向到“

dashboard

”，并且我必须使用内置浏览器返回来访问资源。我可以手动输入 url，它工作正常，但是当我尝试输入应位于

router-outlet

内的任何组件时，我会立即重定向到

dashboard

。

我没有收到任何错误，网址是坏的，毕竟我可以返回到正确的网址。网址很好，但我总是被重定向。

为什么？怎么解决？

Answer 1

在routerLink中使用绝对路由

目前，您正在使用相对路线进行导航（路线：'官方考试'）。如果您的导航发生在 dashboard 路径之外，可能会导致 URL 解析不正确。

为了确保路由正确解析，请添加完整路径：

menu = [{ 
  icon: 'tablerAtom',
  title: 'Arkusze maturalne',
  route: '/dashboard/official-exams', // Absolute route
}]