路由难题

Question

我有一个相当奇怪的问题。在我的angular应用中，我的路由模块混淆了组件。所以如果我输入component-x的地址，它会转到component-y。如果我改变路由对象的顺序，相同地址的路由会突然转到正确的组件，甚至有时它根本找不到组件。

我尝试将路径中的所有变量设置为unque，添加pathMatch: runGuardsAndResolvers：‘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 {}

以下是我的typescript设置：

"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

我敢肯定它就在我面前，但我真的很感激在这方面能帮上忙！非常感谢

Answer 1

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

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

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