Configurable Routing

在单页应用程序中，您可以通过显示应用程序的不同视图来控制用户看到的内容。 Spartacus 使用 Angular Router 来处理从一个视图到另一个视图的导航。路由器通过将每个 URL 视为呈现特定视图的指令来完成此操作。

Spartacus 允许您自定义这些 URL，让您更好地控制 SEO 和店面可用性。 Spartacus 包含用于访问不同视图的默认路由，无需任何配置即可使用。您还可以选择在 Spartacus 中自定义您想要的任何路线。

Adding and Customizing Routes

Spartacus 包含用于访问店面应用程序中不同视图的默认路由，但您也可以在 Spartacus 中添加或自定义所需的任何路由。

Page Types and Page Labels

SAP Commerce Cloud 中的 CMS 包括以下特殊页面类型：产品、类别和目录。还有一个通用的内容页面类型，用于所有其他类型的页面，例如登录、订单历史和常见问题页面。

因此总共是四大类型。

Spartacus 默认定义了以下 Angular Routes：

包含 :productCode 参数的路由用于产品页面
包含 :categoryCode 参数或 :brandCode 参数的路由用于类别页面
包含 “**” 通配符的路由适用于内容页面（换句话说，通配符适用于所有不是产品或类别页面的页面）

内容页面在 CMS 中有一个可配置的 URL，称为页面标签。换句话说，我们可以在 CMS 中通过 page label 来配置内容页面的 URL.

但是，产品、类别和品牌页面的 URL 只能在 Spartacus 中配置。

Adding a Content Page Route

要添加新路由，您只需在 CMS 中添加一个新的内容页面，并为其指定一个以斜杠开头的页面标签，例如 /contact-us。 Spartacus 通配符路由 (**) 无需任何配置即可匹配。

Customizing a Product or Category Page Route

您只能在 Spartacus 中配置 Product 和 Category 页面路由。

产品页面路由必须包含 :productCode 参数来标识产品。类别页面路由必须包含 :categoryCode 或 :brandCode 参数来标识类别。

对于 SEO，您可能希望在路线中包含更多参数。以下是将产品名称添加到产品页面路由的示例 ConfigModule：

routing: {routes: {product: { paths: ['product/:name/:productCode'] }}
}

Adding a Content Page with Dynamic Parameter

Angular 路由可以包含由 Angular 组件的逻辑使用的动态路由参数。尽管 SAP Commerce CMS 不支持带有动态参数的页面标签，但您可以在 Spartacus 中为内容页面设置动态参数。

在 app.module.ts 中，您使用 path 属性定义自定义 Angular Route 的 URL 路径，并使用 data 属性显式分配 CMS 页面标签。下面是一个例子：

import { PageLayoutComponent, CmsPageGuard } from `@spartacus/storefront`;/* ... */imports: [RouterModule.forChild([{// path with a dynamic parameter:path: 'order/:orderCode',// page label without a parameter, starting with slash:data: { pageLabel: '/order' },// the following are needed to display slots and components from the CMS:component: PageLayoutComponent,canActivate: [CmsPageGuard]}]),
]

Route Configuration

Spartacus 在 default-routing-config.ts 中包含预定义的路由配置，允许您运行店面应用程序而根本不需要配置任何路由。但是，Spartacus 中的所有路由都可以通过使用包含路由属性的对象导入 ConfigModule.withConfig() 来配置，并且预定义配置的每个部分也可以使用 ConfigModule.withConfig() 进行扩展或覆盖。

以下是扩展预定义配置的示例：

ConfigModule.withConfig({routing: {routes: {product: { paths: [':productCode/custom/product-path'] }}}
})

预定义的配置被扩展和覆盖按照如下规则实施：

开发人员提供的对象，扩展预定义的对象
开发人员提供的值，例如基元、数组和空值，会覆盖预定义的值

扩展预定义配置时，必须始终使用预定义配置中的路由参数，例如 product/:productCode 路径中的 :productCode 参数。如果省略路由参数，店面的组件可能会损坏。以下是一个错误的做法：

ConfigModule.withConfig({routing: {routes: {product: { paths: ['product/:productName'] } // overwritten without :productCode}}
})

Working with Angular Routes

要使路由可配置，它们需要在 data.cxRoute 属性和配置中的路由键中命名相同。也就是说，多处的 route 名称必须保持一致。

以下示例显示了 data.cxRoute 属性，该属性将路由名称定义为“product”：

const routes: Routes = [{data: {cxRoute: 'product' // the name of the route},path: null, // it will be replaced by the path from configcomponent: ProductPageComponent/* ... */}
];

Configurable Router Links

配置路由时，必须相应地配置到这些路由的链接。可以使用 cxUrl 管道在 HTML 模板中自动生成已配置的路由器链接。这允许您将路由的名称和 params 对象转换为配置的路径。

要使用 cxUrl 管道，您需要将 UrlModule 导入到使用可配置路由器链接的每个模块中。

默认情况下，输出路径数组是绝对的，并包含一个前导正斜杠“/”。但是，当输入以不是具有 cxRoute 属性的对象的元素（例如字符串“./”或“…/”或 {）开头时，输出路径不包含前导正斜杠“/” not_cxRoute_property: … }。另请注意，无法从路由名称和参数解析的路由将返回根 URL [’/’]。

Router Links

您可以按如下方式转换路由名称和 params 对象：

{ cxRoute: <route> } | cxUrl

下面是一个例子：

<a [routerLink]="{ cxRoute: 'cart' } | cxUrl"></a>

上面例子对应的 route 配置：

ConfigModule.withConfig({routing: {routes: {cart: { paths: ['custom/cart-path'] }}}
})

上面例子转换的结果：

<a [routerLink]="['/', 'custom', 'cart-path']"></a>

routerLink 是一个指令：当应用于模板中的元素时，使该元素成为开始导航到某个路由的链接。导航会在页面上的 router-outlet 位置上打开一个或多个路由组件。

Programmatic API

Navigation to the Generated Path

使用 { cxRoute: <route> } 调用的 RoutingService.go 方法导航到生成的路径，类似于 HTML 模板中带有 cxUrl 管道的 routerLink。

下面是一个配置：

ConfigModule.withConfig({routing: {routes: {product: { paths: ['p/:productCode'] }}}
})

代码调用：

routingService.go({ cxRoute: 'product', params: { productCode: 1234 } });

Disabling Standard Routes

Spartacus 中的标准 Angular 路由，例如产品详细信息页面的路由，可以通过配置禁用。这可能很有用，例如，当您想要提供自定义路由时。禁用路由时，路径配置仅用于生成路由器链接。

下列代码能禁掉 product 明细页面的路由：

ConfigModule.withConfig({routing: {routes: {product: {disabled: true,paths: /* ... */}}}
})

路由别名

可以在路径数组中配置多个路由别名。然后 Spartacus 使用第一个配置的别名生成路由器链接，该别名可以满足带有 params 对象的路径数组的参数。因此，您需要将别名从需要最具体参数的别名到具有最少参数的别名排序。

在以下示例中，配置具有正确顺序的路由别名：

ConfigModule.withConfig({routing: {routes: {product: {paths: [':campaignName/p/:productCode', /* this will be used when the `campaignName` parameter is provided */'p/:productCode' /* this will be used otherwise */]}}}
})

SAP Spartacus 的路由配置相关推荐

SAP Spartacus 默认路由配置的工作原理
这个默认配置文件的名称:default-routing-config.ts 查看哪些地方消费了 defaultRoutingConfig: provudeDefaultConfig 是一个 helpe ...
如何对SAP Spartacus支持路由的Component进行单元测试
完整源代码: import { Component, NgZone } from '@angular/core'; import { TestBed } from '@angular/core/tes ...
SAP Spartacus RouteGuard路由守卫之CmsPageGuard
每个cms Component都能配置guards. 从后台加载CMS Component for a page之后,所有该Component的guards会执行. 从CmsPageGuard的实现代 ...
SAP Spartacus LayoutConfig的配置为何运行时不生效
看个具体的例子: 运行时我期望在header区域能看到7个Logo,然而没能按照我期望的工作. 看一个配置能够正常工作的例子: 再看不能正常工作的例子:配置信息header前面少了一层层级结构:Lay ...
如何自定义SAP Spartacus的路由路径
地址:https://stackoverflow.com/questions/65830446/customise-spartacus-cart-path 以chart为例: By default i ...
SAP Spartacus的全局配置
方法1 B2cStorefrontModule.withConfig(config?: StorefrontModuleConfig) If you import B2cStorefrontModul ...
SAP 电商云 Spartacus UI product 明细页面的路由配置
如果直接访问如下 url: http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT- ...
SAP Spartacus全局配置里和路由Route相关的配置
在configuration.service.ts里查看config对象: 展开routing字段: 所有路由配置信息都在里面: 和产品相关的路由信息: 要获取更多Jerry的原创文章,请关注公众号& ...
SAP Spartacus B2B OrgUnit 和 OrgUser 的路由映射差异比较
SAP Spartacus B2B 页面类似 SAP Fiori Launchpad,共有 6 个 tile(磁贴),点击某个磁贴,能跳转到对应的列表页面. 路由映射就是指点击某个 url 之后(例如 ...

SAP Spartacus 的路由配置