angular - 路由难题

问题描述

我有一个很奇怪的问题。在我的角度应用程序中，我的路由模块正在混合组件。因此，如果我输入 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

我敢肯定它是从我的脸上开始的，但我真的很感激这方面的一些帮助！太感谢了

标签： angulartypescriptroutes

angular - 路由难题

问题描述

解决方案

推荐阅读