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

我已經解決了這個問題，對於將來可能遇到的任何人，請檢查您的標簽是否具有點擊偵聽器或路由器鏈接，即使用戶出於某種原因沒有點擊，也不要同時擁有這兩者頁面之間的路由中斷。