当默认路由在 Angular 中有参数时无法导航到路由

Question

我有以下路线：

const routes: Routes = [
  {
    path: '',
    component: BlogLayoutComponent,
    children: [
      {
        path: ':pageNumber',
        component: HomeComponent
      },
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'article/:id',
        component: ArticleComponent
      },
      {
        path: 'articles-by-hashtag/:id',
        component: ArticlesByHashComponent
      },
      {
        path: 'articles-by-category/:id',
        component: ArticlesByCatComponent
      },
      {
        path: 'about-me',
        component: AboutMeComponent
      }
    ]
  }
];

所有路由都工作正常，但我无法使用routerLink导航到about-me页面， routerLink所示：

<li><a [routerLink]="[ 'about-me' ]">ABOUT ME</a></li>

如果我删除默认参数:pageNumber则导航有效，否则about-me链接:pageNumber我带到默认路线。

我怎样才能让about-me路线工作？ 我宁愿不使用router.navigate(...说实话。

Answer 1

你必须像这样改变你的路线

<li><a [routerLink]="['/about-me']">ABOUT ME</a></li>

然后在 pageNumber 参数之前添加一些路由。 我不确定您对 HomeComponent 的路由定义是否正确

{
   path: 'something/:pageNumber',
   component: HomeComponent
},