Configurable Routing

在單頁應用程序中，您可以通過顯示應用程序的不同視圖來控制用戶看到的內(nèi)容。 Spartacus 使用 Angular Router 來處理從一個視圖到另一個視圖的導航。 路由器通過將每個 URL 視為呈現(xiàn)特定視圖的指令來完成此操作。

Spartacus 允許您自定義這些 URL，讓您更好地控制 SEO 和店面可用性。 Spartacus 包含用于訪問不同視圖的默認路由，無需任何配置即可使用。 您還可以選擇在 Spartacus 中自定義您想要的任何路線。

Adding and Customizing Routes

Spartacus 包含用于訪問店面應用程序中不同視圖的默認路由，但您也可以在 Spartacus 中添加或自定義所需的任何路由。

Page Types and Page Labels

SAP Commerce Cloud 中的 CMS 包括以下特殊頁面類型：產(chǎn)品、類別和目錄。 還有一個通用的內(nèi)容頁面類型，用于所有其他類型的頁面，例如登錄、訂單歷史和常見問題頁面。

因此總共是四大類型。

Spartacus 默認定義了以下 Angular Routes：

• 包含 :productCode 參數(shù)的路由用于產(chǎn)品頁面
• 包含 :categoryCode 參數(shù)或 :brandCode 參數(shù)的路由用于類別頁面
• 包含 “**” 通配符的路由適用于內(nèi)容頁面（換句話說，通配符適用于所有不是產(chǎn)品或類別頁面的頁面）

內(nèi)容頁面在 CMS 中有一個可配置的 URL，稱為頁面標簽。換句話說，我們可以在 CMS 中通過 page label 來配置內(nèi)容頁面的 URL.

但是，產(chǎn)品、類別和品牌頁面的 URL 只能在 Spartacus 中配置。

Adding a Content Page Route

要添加新路由，您只需在 CMS 中添加一個新的內(nèi)容頁面，并為其指定一個以斜杠開頭的頁面標簽，例如 /contact-us。 Spartacus 通配符路由 (**) 無需任何配置即可匹配。

Customizing a Product or Category Page Route

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

產(chǎn)品頁面路由必須包含 :productCode 參數(shù)來標識產(chǎn)品。 類別頁面路由必須包含 :categoryCode 或 :brandCode 參數(shù)來標識類別。

對于 SEO，您可能希望在路線中包含更多參數(shù)。 以下是將產(chǎn)品名稱添加到產(chǎn)品頁面路由的示例 ConfigModule：

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

Adding a Content Page with Dynamic Parameter

Angular 路由可以包含由 Angular 組件的邏輯使用的動態(tài)路由參數(shù)。 盡管 SAP Commerce CMS 不支持帶有動態(tài)參數(shù)的頁面標簽，但您可以在 Spartacus 中為內(nèi)容頁面設置動態(tài)參數(shù)。

在 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'] }}} })

預定義的配置被擴展和覆蓋按照如下規(guī)則實施：

• 開發(fā)人員提供的對象，擴展預定義的對象
• 開發(fā)人員提供的值，例如基元、數(shù)組和空值，會覆蓋預定義的值

擴展預定義配置時，必須始終使用預定義配置中的路由參數(shù)，例如 product/:productCode 路徑中的 :productCode 參數(shù)。 如果省略路由參數(shù)，店面的組件可能會損壞。 以下是一個錯誤的做法：

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 導入到使用可配置路由器鏈接的每個模塊中。

默認情況下，輸出路徑數(shù)組是絕對的，并包含一個前導正斜杠“/”。 但是，當輸入以不是具有 cxRoute 屬性的對象的元素（例如字符串“./”或“…/”或 {）開頭時，輸出路徑不包含前導正斜杠“/” not_cxRoute_property: … }。 另請注意，無法從路由名稱和參數(shù)解析的路由將返回根 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> } 調(diào)用的 RoutingService.go 方法導航到生成的路徑，類似于 HTML 模板中帶有 cxUrl 管道的 routerLink。

下面是一個配置：

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

代碼調(diào)用：

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

Disabling Standard Routes

Spartacus 中的標準 Angular 路由，例如產(chǎn)品詳細信息頁面的路由，可以通過配置禁用。 這可能很有用，例如，當您想要提供自定義路由時。 禁用路由時，路徑配置僅用于生成路由器鏈接。

下列代碼能禁掉 product 明細頁面的路由：

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

路由別名

可以在路徑數(shù)組中配置多個路由別名。 然后 Spartacus 使用第一個配置的別名生成路由器鏈接，該別名可以滿足帶有 params 對象的路徑數(shù)組的參數(shù)。 因此，您需要將別名從需要最具體參數(shù)的別名到具有最少參數(shù)的別名排序。

在以下示例中，配置具有正確順序的路由別名：

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 的路由配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。