Question

以下是路由模块ts文件的相关代码：

    const routes: Routes = [{
        path: '',
        component: LoginPageComponent
      },
      {
        path: 'dashboard',
        component: DashboardPageComponent
      },
      {
        path: 'dashboard/:id',
        component: DashboardPageComponent,
        children: [{
          path: 'home',
          component: HomeComponent
        }]
      },
      {
        path: '**',
        component: LoginPageComponent
      },
    ];

这是我的仪表板组件：

<app-sidenav></app-sidenav>
<app-bar></app-bar>
<router-outlet></router-outlet>

当我直接导航到仪表板/主页时，不会加载HomeComponent。为什么会这样？

注意：我尝试删除：id。

Answer 1

由于您已在home段中定义了dashboard/id路由，因此您无法通过执行/home直接访问dashboard/home，因为此模式将不匹配任何路由定义。

在访问子段dashboard/id路由之前，您必须指定父段/home。所有人都提到 dashboard/someid/home ，因为它会尝试将整个URL dashboard/someid/home与已注册的路由定义进行匹配，并且其中首个dashboard/someid模式将与之匹配并呈现UserDashboardPageComponent之后，它尝试搜索与/home子路径匹配的剩余模式/home，因此将有助于在{{1的HomeComponent内呈现router-outlet }}组件

Answer 2

您的home组件路径不正确。从:id中删除path: 'dashboard/:id'很好。

我已经创建了一个演示here

Answer 3

我想补充一点，您的路由配置中有一些问题可以解决：

const routes: Routes = [{
    path: 'login',
    component: LoginPageComponent
  },
  {
    path: 'dashboard',
    component: DashboardPageComponent,
    children: [{
      path: 'home',
      component: HomeComponent
    }]
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: LoginPageComponent
  },
];

此外，您正在DashboardPageComponent和/dashboard上加载相同的组件/dashboard/:id。考虑为/dashboard/:id

定义一个特定的组件

为什么子路线不能按角度工作？

3 个答案: