Angular - 以 :id 开头的延迟加载子路由捕获所有内容

Question

我有以下路由模块：

app-routing.modules.ts

...
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./startpage/startpage.module').then(m => m.StartpageModule)
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'shop',
    loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule),
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];
...

和 shop-routing.modules.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'user',
    pathMatch: 'full',
  },
  {
    path: ':id',
    component: ShopPageComponent
  }
];

问题是，因为我用 ':id' 开始了 'shop' 的子路线，所以它充当了 'catch-everything' 路线。如果我现在调用'localhost:4200/user'，它会加载 shopcomponent。为什么会这样？我认为 'shop' 是主要路线，并且仅当链接以 'shop/' 作为前缀时才调用 ':id' 子级。如果我之前输入 'shop/:id'，它可以正常工作，但是该路线也可以通过 'localhost:4200/shop/shop/something' 调用，这很丑，而且我的 authGuard 也不再工作了。

Answer 1

App-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./startpage/startpage.module').then(m => m.StartpageModule),
    pathMatch: 'prefix'
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),
    canActivate: [AuthGuard],
    pathMatch: 'prefix'
  },
  {
    path: 'shop',
    loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule),
    canActivate: [AuthGuard],
    pathMatch: 'prefix'
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }

pathMatch: 'prefix' 将仅检查前缀路径并检查路径其余部分的子路径。