Angular

Question

我有以下路由模块：

应用-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'
  }
];
...

和购物-routing.modules.ts

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

问题是，由于我使用“:id”启动 'shop' 的子路由，因此它充当 'catch-everything' 路由。如果我现在调用 'localhost:4200/user'，它会加载商店组件。为什么会这样？我认为 'shop' 是主要路线，只有在 link 以 'shop/' 作为前缀时才调用 ':id' 子级。如果我之前放 'shop/:id'，它工作正常，但是也可以通过 'localhost:4200/shop/shop/something' 调用路由，这很丑，而且我的 authGuard 不再工作了。

Answer 1

应用-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' 将仅检查前缀路径并检查路径其余部分的子路径。

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

Angular - LazyLoading child-route starting with :id catches everything

javascript

routing