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

【问题标题】：Cannot navigate to route when default route has a parameter in Angular当默认路由在 Angular 中有参数时无法导航到路由
【发布时间】：2019-10-27 11:30:14
【问题描述】：

我有以下路线：

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 页面，如下所示：

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

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

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

【问题讨论】：

试试这个 [routerLink]="[ '/about-me' ]"

标签： javascript angular typescript ecmascript-6 single-page-application

【解决方案1】：

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

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

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

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

【讨论】：