无法使用router.navigate方法或routerlink ::导航到子路由：错误：无法匹配任何路由。网址段：“ child2”

Question

这是我的路线不变

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: '**',
        redirectTo: 'child1'
      },
      {
        path: 'child1',
        component: Child1Component
      },
      {
        path: 'child2',
        component: Child2Component
      }
    ]
  }
];

RouterModule.forRoot(routes)

在导入模块中添加了这一行。

在MenuComponent内，我尝试使用此行单击任何菜单（child1或child2），导航至相应的子组件。

this.router.navigate(['/dashboard/child1']); //or tried with this.router.navigate(['child1']);

路由器出口在DashboardComponent中

有人可以帮我吗？

Answer 1

这可能是由于Angular的第一个匹配策略而发生的。当您尝试访问任何URL时，通配符将是第一个被使用的，并且对所有人而言都是如此。将其放在末尾即可使用。

  

路由在配置中的顺序很重要，这是设计使然。路由器在匹配路由时会使用“先赢”策略，因此应将更具体的路由放在不那么具体的路由之上。在上面的配置中，首先列出具有静态路径的路由，然后是与默认路由匹配的空路径路由。通配符路由排在最后，因为它与每个URL匹配，并且仅当没有其他路由最先匹配时才应选择通配符路由。 Angular Router

{
path: 'dashboard',
component: DashboardComponent,
children: [
  {
    path: 'child1',
    component: Child1Component
  },
  {
    path: 'child2',
    component: Child2Component
  },
  {
    path: '**',
    redirectTo: 'child1'
  }
]

}

Answer 2

父组件将是DashboardComponent，因为它与路由匹配。

要在Angular中进行子路由，必须放置

<router-outlet></router-outlet>

在DashboardComponent内部，以便路由器知道在哪里放置Child1Component。