Angular 路由：每当我刷新页面或手动键入特定的 URL 时，Angular 都会重定向回父路由

Question

我有一个 CRM 模块，我在其中定义了自己的 CRM 路由模块，如下所示：

const routes: Routes = [
  {
    path: 'crm',
    component: CrmComponent,
    children: [
      { path: '', redirectTo: 'companies', pathMatch: 'full' },
      { path: 'companies', component: CompanyListComponent },
      { path: 'contacts', component: ContactListComponent },
      {
        path: 'companies/new',
        component: CompanyEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'contacts/new',
        component: ContactEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'companies/edit/:id',
        component: CompanyEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'contacts/edit/:id',
        component: ContactEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'companies/view/:id',
        component: CompanyComponent,
        children: [
          // { path: '', redirectTo: 'details', pathMatch: 'full' },
          { path: '', component: CompanyEditComponent },
          { path: 'documents', component: CompanyDocumentsComponent },
          {
            path: 'related-contacts',
            component: CompanyRelatedContactsComponent,
          },
        ],
      },
      {
        path: 'contacts/view/:id',
        component: ContactComponent,
        children: [
          { path: '', component: ContactEditComponent },
          {
            path: 'related-products',
            component: ContactRelatedProductsComponent,
          },
          {
            path: 'related-raw-materials',
            component: ContactRelatedRawMaterialsComponent,
          },
        ],
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class CRMRoutingModule {}

因此，每当我尝试手动编写 URL 以查看特定公司或联系人的详细信息 /crm/companies/view/123?viewDetails=true 时，它会将我重定向回 /crm。

每当我在子路由上并尝试刷新它将我重定向回 /crm 时，都会发生同样的情况。

我尝试更改路线的顺序，但是没有帮助。 先感谢您！

编辑：也许我没有正确构建我的帖子并且让它有点不足，我已经放置了所有这些组件并且它们加载了。 但是，如果我尝试手动键入某个公司或联系人的地址，它会将我重定向回 CrmComponent（在本例中为根），每当我在子组件中并重新加载页面时，都会发生同样的情况，它只会重定向我回来了，不知道为什么

编辑：我已经解决了这个问题，对于将来可能遇到它的任何人，请检查您的标签是否具有点击侦听器或路由器链接，即使用户没有点击，也不要同时拥有它，因为出于某种原因，页面之间的路由中断。

Answer 1

嗨，在您需要添加的每个子组件中 -

<router-outlet></router-outlet>

这意味着您需要添加CrmComponent，CompanyComponent，ContactComponent。 如果不添加 angular 不知道在哪里添加子组件。 因此，它总是加载到第一个路径组件，即 CrmComponent。

我已经创建了一个示例，请查看并让我知道它是否有用

Answer 2

我已经解决了这个问题，对于将来可能遇到的任何人，请检查您的标签是否具有点击侦听器或路由器链接，即使用户出于某种原因没有点击，也不要同时拥有这两者页面之间的路由中断。