Angular 12路由配置问题：如何忽略URL末尾部分匹配同一组件

你的路由配置失效的核心原因是pathMatch:'full'与:id/**的组合冲突：

• pathMatch:'full'要求路由路径必须完全匹配URL的完整路径，但**是通配符（并非实际路径的一部分），因此/menu/12/helloworld无法匹配path: ':id/**'这条路由，最终触发了全局的**重定向。

要实现单条路由匹配两种URL格式，推荐以下两种可行方案：

方案一：自定义路由匹配器（单条路由覆盖所有场景） #

通过Angular的自定义matcher函数，直接统一匹配/menu/:dishid和/menu/:dishid/xxx格式的URL：

{
  path: 'menu',
  children: [
    {
      matcher: (urlSegments) => {
        // 检查URL至少包含一个路径段（即dishid）
        if (urlSegments.length >= 1) {
          // 提取第一个路径段作为dishid参数
          const dishIdSegment = urlSegments[0];
          return {
            // 消费所有URL段（忽略后续装饰性文本）
            consumed: urlSegments,
            posParams: { id: dishIdSegment }
          };
        }
        return null; // 不匹配时返回null
      },
      component: DishComponent
    }
  ]
},
{
  path:'**',
  redirectTo:'404'
}

这个匹配器会捕获所有以/menu/开头、后续至少包含一个路径段的URL——不管后面跟着多少装饰性文本，都会将第一个路径段作为id参数传递给DishComponent，完全满足需求。

方案二：简化通配符路由（兼容多段后缀，需补充无后缀场景） #

如果不想自定义匹配器，也可以用一条通配符路由覆盖带后缀的URL，再补充一条无后缀的路由（接近单条路由的实现方式）：

{
  path: 'menu',
  children: [
    // 匹配 /menu/:dishid
    { path: ':id', component: DishComponent },
    // 匹配 /menu/:dishid/xxx/xxx 等任意后缀路径
    { path: ':id/**', component: DishComponent }
  ]
},
{
  path:'**',
  redirectTo:'404'
}

注意：两条路由都不能加pathMatch:'full'，否则会破坏通配符的匹配逻辑。

组件内参数获取 #

无论用哪种方案，在DishComponent中都可以通过ActivatedRoute正常获取id参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const dishId = params.get('id');
    // 根据dishId加载对应数据
  });
}

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