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'] }
}
}
1
2
3
4
5
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]
}
]),
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Route Configuration
Spartacus 在 default-routing-config.ts 中包含预定义的路由配置，允许您运行店面应用程序而根本不需要配置任何路由。 但是，Spartacus 中的所有路由都可以通过使用包含路由属性的对象导入 ConfigModule.withConfig() 来配置，并且预定义配置的每个部分也可以使用 ConfigModule.withConfig() 进行扩展或覆盖。
以下是扩展预定义配置的示例：
ConfigModule.withConfig({
routing: {
routes: {
product: { paths: [':productCode/custom/product-path'] }
}
}
})
1
2
3
4
5
6
7
预定义的配置被扩展和覆盖按照如下规则实施：
开发人员提供的对象，扩展预定义的对象
开发人员提供的值，例如基元、数组和空值，会覆盖预定义的值
扩展预定义配置时，必须始终使用预定义配置中的路由参数，例如 product/:productCode 路径中的 :productCode 参数。 如果省略路由参数，店面的组件可能会损坏。 以下是一个错误的做法：
ConfigModule.withConfig({
routing: {
routes: {
product: { paths: ['product/:productName'] } // overwritten without :productCode
}
}
})
1
2
3
4
5
6
7
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 config
component: ProductPageComponent
/* ... */
}
];
1
2
3
4
5
6
7
8
9
10
Configurable Router Links
配置路由时，必须相应地配置到这些路由的链接。 可以使用 cxUrl 管道在 HTML 模板中自动生成已配置的路由器链接。 这允许您将路由的名称和 params 对象转换为配置的路径。
要使用 cxUrl 管道，您需要将 UrlModule 导入到使用可配置路由器链接的每个模块中。
默认情况下，输出路径数组是绝对的，并包含一个前导正斜杠“/”。 但是，当输入以不是具有 cxRoute 属性的对象的元素（例如字符串“./”或“…/”或 {）开头时，输出路径不包含前导正斜杠“/” not_cxRoute_property: … }。 另请注意，无法从路由名称和参数解析的路由将返回根 URL [’/’]。
Router Links
您可以按如下方式转换路由名称和 params 对象：
{ cxRoute: } | cxUrl
1
下面是一个例子：
1
上面例子对应的 route 配置：
ConfigModule.withConfig({
routing: {
routes: {
cart: { paths: ['custom/cart-path'] }
}
}
})
1
2
3
4
5
6
7
上面例子转换的结果：
1
routerLink 是一个指令：当应用于模板中的元素时，使该元素成为开始导航到某个路由的链接。导航会在页面上的 router-outlet 位置上打开一个或多个路由组件。
Programmatic API
Navigation to the Generated Path
使用 { cxRoute: } 调用的 RoutingService.go 方法导航到生成的路径，类似于 HTML 模板中带有 cxUrl 管道的 routerLink。
下面是一个配置：
ConfigModule.withConfig({
routing: {
routes: {
product: { paths: ['p/:productCode'] }
}
}
})
1
2
3
4
5
6
7
代码调用：
routingService.go({ cxRoute: 'product', params: { productCode: 1234 } });
1
Disabling Standard Routes
Spartacus 中的标准 Angular 路由，例如产品详细信息页面的路由，可以通过配置禁用。 这可能很有用，例如，当您想要提供自定义路由时。 禁用路由时，路径配置仅用于生成路由器链接。
下列代码能禁掉 product 明细页面的路由：
ConfigModule.withConfig({
routing: {
routes: {
product: {
disabled: true,
paths: /* ... */
}
}
}
})
1
2
3
4
5
6
7
8
9
10
路由别名
可以在路径数组中配置多个路由别名。 然后 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 */
]
}
}
}
})
