Angular路由组件匹配混乱、路由顺序影响匹配结果问题求助

核心问题原因 #

• 通配符路由**位置错误：Angular路由是从上到下按定义顺序优先匹配，你把404通配符路由放在了路由列表的第二位，除了根路径/之外的所有请求，都会直接被这个通配符匹配到NotFoundComponent，后面的路由配置根本不会被触发。
• 动态参数路由优先级高于静态路由：所有不带前缀的动态参数路由（比如:catParCompCategory、:catCompCategory/:catCompCategoryChild这类）都放在了静态路由前面，访问静态路径比如/checkout时，会被识别为:catParCompCategory = 'checkout'，直接匹配到CategoryParentComponent，不会走到后面的CheckoutComponent配置。同理/help-center/about-us会被匹配到双参数的CategoryComponent路由，/payfast/success会被匹配到三参数的SingleProductComponent路由。

修复方案 #

路由配置的核心优先级规则：静态路由优先于动态路由，路径段多的动态路由放在路径段少的动态路由前面，通配符路由必须放在整个路由列表的最后。

调整后的正确路由配置如下：

const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    // 短路径静态路由优先
    { path: 'checkout' , component: CheckoutComponent },
    { path: 'bounce', component: BounceComponent, pathMatch: 'full' },
    // 带固定前缀的静态路由组
    // General Pages
    // ------------------------
    { path: 'help-center/about-us', component: AboutUsComponent },
    { path: 'help-center/contact-us', component: ContactUsComponent },
    { path: 'help-center/faq', component: FaqComponent },
    { path: 'help-center/order-tracking', component: OrderTrackingComponent },
    { path: 'help-center/privacy-policy', component: PrivacyPolicyComponent },
    { path: 'help-center/returns', component: ReturnsComponent },
    { path: 'help-center/terms-conditions', component: TermsConditionsComponent },
    // Payfast
    // ------------------------
    { path: 'payfast/cancel', component: CancelComponent },
    { path: 'payfast/notify', component: NotifyComponent },
    { path: 'payfast/success', component: SuccessComponent },
    // 带固定前缀的动态路由
    { path: 'filter/:condition/:value/:parameter' , component: FilteredProductsComponent },
    { path: 'view-all/:allCompCategory' , component: ViewAllComponent },
    // 无固定前缀的动态路由，路径段多的放前面
    { path: ':singleProdCompCategory/:singleProdCompCategoryChild/:singleProdCompProductName' , component: SingleProductComponent },
    { path: ':catCompCategory/:catCompCategoryChild' , component: CategoryComponent },
    { path: ':catParCompCategory' , component: CategoryParentComponent },
    // 通配符必须放在路由列表最后
    { path: '**', component: NotFoundComponent },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            anchorScrolling: 'enabled',
            onSameUrlNavigation: 'reload',
            useHash: true
        }
    )],
    exports: [RouterModule]
})

export class RoutingModule {}

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