Angular应用路由正确配置：路径冲突与不存在分类路由处理

1. 解决/products/:id不生效的问题 #

你原来的配置问题根源是两个相同空path的子路由，Angular路由匹配遵循优先匹配、命中即止的规则，第一个空path匹配到HomeModule后，后续的ProductsModule路由永远不会被加载，所以/products路径的逻辑完全不生效。

你调整的拆分思路是完全可行的，只需要同步调整子模块内部的路由前缀即可，最终正确配置如下：

调整后app-routing.module.ts代码 #

const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: '../app/modules/home.module#HomeModule'
      },
      // 固定前缀路由要放在动态参数路由前面，避免被动态参数匹配拦截
      {
        path: 'products',
        loadChildren: '../app/modules/products.module#ProductsModule'
      },
      {
        path: ':mainCategoryId',
        loadChildren: '../app/modules/products.module#CategoriesModule'
      },
      {
        path: ':mainCategoryId/:subCategoryId',
        loadChildren: '../app/modules/products.module#CategoriesModule'
      }
    ]
  },
  {
    path: '404',
    component: NotFoundComponent // 你需要提前创建404页面组件
  },
  {
    path: '**',
    redirectTo: '/404'
  }
];

调整后ProductsModule内部路由（products.routing.ts） #

因为主路由已经添加了products前缀，子模块路由不需要再重复写前缀：

const routes: Routes = [
  {
    path: ':id',
    component: ProductDetailsComponent
  }
];

CategoriesModule内部路由（categories.routing.ts） #

const routes: Routes = [
  {
    path: '',
    component: CategoriesComponent,
    canActivate: [CategoryExistsGuard] // 用路由守卫校验分类合法性
  }
];

2. 实现不存在分类跳转404的需求 #

使用Angular的CanActivate路由守卫实现动态分类校验，步骤如下：

第一步：创建分类校验路由守卫 #

@Injectable({
  providedIn: 'root'
})
export class CategoryExistsGuard implements CanActivate {
  // 注入你请求分类数据的服务
  constructor(private categoryService: CategoryService, private router: Router) {}

  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean | UrlTree> {
    // 从路由参数中取分类值
    const mainCategory = route.params['mainCategoryId'];
    const subCategory = route.params['subCategoryId'];
    
    // 从后端获取全部分类数据（可以做本地缓存避免重复请求）
    const allCategories = await this.categoryService.getAllCategories().toPromise();
    
    // 校验主分类是否存在
    const existMainCategory = allCategories.find(item => item.name === mainCategory);
    if (!existMainCategory) {
      return this.router.parseUrl('/404');
    }
    
    // 如果有子分类参数，校验子分类是否属于当前主分类
    if (subCategory) {
      const existSubCategory = existMainCategory.children.find(item => item.name === subCategory);
      if (!existSubCategory) {
        return this.router.parseUrl('/404');
      }
    }
    
    return true;
  }
}

第二步：将守卫添加到分类路由 #

就是上面CategoriesModule路由里已经写的canActivate: [CategoryExistsGuard]配置，访问分类路径时会自动触发校验，不符合条件直接跳转到404。

内容的提问来源于stack exchange，提问作者jrywin