routerlink 总是返回 ' '

Question

我有一个问题，点击我的路由器链接时总是返回到 '' 路径。 而路由器链接分别是“用户/团队”和“用户/仪表板”

这是我的路由器设置。

这是我的app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './view/home/home.component';
import { UserComponent } from './shared/layouts/user/user.component';

export const routes: Routes = [
{
    path: '', 
    pathMatch: 'full', 
    component: HomeComponent
},
{
    path:'user',
    loadComponent: () => UserComponent,
    children: [
       {
            path:'',
            loadChildren: () => import('./view/user/user.routes').then((m) => m.routes)
       }
    ]
}

];

我有第二个路由文件 user.routes.ts

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TeamsComponent } from './teams/teams.component';

export const routes: Routes = [
    {
      path: 'dashboard',
      loadComponent: () => DashboardComponent,
    },
    {
      path:'teams',
      loadComponent: () => TeamsComponent
    }
    ,
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'dashbaord',
    } 
];

我的侧面菜单包含路由器链接，如下所示； side-menu.component.html

    <li>
      <a href="#" routerlink="/user/dashboard" class="nav-link link-body-emphasis">
        <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
        Dashboard
      </a>
    </li>
    <li>
      <a href="#" routerlink="/user/teams" class="nav-link link-body-emphasis">
        <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
        My Teams
      </a>
    </li>

这是 side-menu.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-side-menu',
  standalone: true,
  imports: [],
  templateUrl: './side-menu.component.html',
  styleUrl: './side-menu.component.scss'
})
export class SideMenuComponent {

}

希望你能帮助我！

Answer 1

能否将用户的路由更改为

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TeamsComponent } from './teams/teams.component';

export const routes: Routes = [
{ path: '', children:[
    {
      path: 'dashboard',
      loadComponent: () => DashboardComponent,
    },
    {
      path:'teams',
      loadComponent: () => TeamsComponent
    }
    ,
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'dashbaord',
    }
    ]
}
];