路由难题答案

【问题标题】：Routing Conundrum路由难题
【发布时间】：2021-06-12 00:37:11
【问题描述】：

我有一个很奇怪的问题。在我的角度应用程序中，我的路由模块正在混合组件。因此，如果我输入 component-x 的地址，它将带我到 component-y。如果我更改路由对象的顺序，同一地址的路由会突然转到正确的组件，甚至有时根本找不到组件。

我尝试将路径中的所有变量设置为 unque，添加 pathMatch:'full'、runGuardsAndResolvers:'always'，甚至将所有内容都剥离为标准实现。我从 10 -12 升级，希望它能自行修复，但唉！

这是我的代码：

const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    { path: '**', component: NotFoundComponent },
    // Shope Pages
    // ------------------------
    { path: ':catCompCategory/:catCompCategoryChild' , component: CategoryComponent },
    { path: ':catParCompCategory' , component: CategoryParentComponent },
    { path: 'checkout' , component: CheckoutComponent },
    { path: 'filter/:condition/:value/:parameter' , component: FilteredProductsComponent },
    { path: ':singleProdCompCategory/:singleProdCompCategoryChild/:singleProdCompProductName' , component: SingleProductComponent },
    { path: 'view-all/:allCompCategory' , component: ViewAllComponent },
    // General Pages
    // ------------------------
    { path: 'help-center/about-us', component: AboutUsComponent },
    { path: 'bounce', component: BounceComponent, pathMatch: 'full' },
    { 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 }
];

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

export class RoutingModule {}

这是我的打字稿设置：

"baseUrl": "./",
 "allowSyntheticDefaultImports": true,
 "importHelpers": true,
 "sourceMap": true,
 "declaration": false,
 "downlevelIteration": true,
 "experimentalDecorators": true,
 "moduleResolution": "node",
 "target": "es2017",
 "module": "es2020",
 "lib": [
 "es2018",
 "dom"
        ],
 "typeRoots": [
 "node_modules/@types",
 "./typings.d.ts"
        ],
 "resolveJsonModule": true,
 "esModuleInterop": true,
 "skipLibCheck": true

我确信它是从我的脸上开始的，但我真的很感谢你能在这方面提供一些帮助！非常感谢

【问题讨论】：

非常可爱 - 但不是 component-x / component-y 你能更具体地说明问题是什么吗？此外，您可能希望删除导入 - 它们无助于理解您的代码。另外，您说您“将所有内容都剥离为标准实现”（无论这意味着什么）。这将更接近最小可行示例 - 你能证明这一点吗？
嗨@Felix。我的意思是，例如，如果我去 /help-center/contact-us 期望它带我到 ContactUsComponent 它将带我到 CategoryComponent （如上）。如果移动路由对象中的组件/路径设置，它将完全导航到另一个组件。我所说的标准实现的意思是在路由选项中没有任何额外的参数：imports: [RouterModule.forRoot(routes)]。我希望这更清楚

标签： angular typescript routes

【解决方案1】：

当您仅使用路由参数定义路由时，这就是您得到的行为。这就是为什么没有固定路径而只有路由参数是不好的做法。

快速破解方法是将所有以 params 开头的路由移动到路由数组的末尾。

真正的解决方法是在这些路由的开头添加一个常量。例如类别组件的“category/something/something-else”。

【讨论】：