如下圖所示，為了減少 SAP 電商雲 Spartacus 客戶實施時不必要的配置，Spartacus 將不少頁面的路由路徑的預設配置，定義在如下的 default-routing-config.ts 檔案裡：

![](https://img-blog.csdnimg.cn/img_convert/1545fbaa5ed34db2f2328b933311c772.png)

修改之後，產品明細頁面和 homepage 的產品超連結都一齊變更了：

![](https://img-blog.csdnimg.cn/img_convert/655f4a006aa78d005d014e479226639b.png)

![](https://img-blog.csdnimg.cn/img_convert/8a26281571880e025ad4b1c35d639623.png)

這個預設配置什麼時候被讀取，並且如何被解析的呢？

如果僅僅按照 product 作為關鍵字搜尋，那麼匹配結果太多了，因為這個單詞太 generic 了：
![](https://img-blog.csdnimg.cn/img_convert/2ee073fcf6573eb66e757d1ba035b849.png)

![](https://img-blog.csdnimg.cn/img_convert/7fd1f27a6b86370b6879114c3608386c.png)

而且 RoutesConfig 這個型別，多半都是被程式碼動態解析的。

換個思路，把 product 改成 product2，看看會不會報錯：
![](https://img-blog.csdnimg.cn/img_convert/62e94a805014ed4142316409c36cde4f.png)

這回尷尬了，滑鼠放上去，顯示的 url 指向 home 連結，說明 product 明細頁面的 url 根本就沒有生成，這條路也行不通。

再根據 paramsMapping 搜尋，因為我們的程式碼，肯定在某處，會解析這個欄位：

![](https://img-blog.csdnimg.cn/img_convert/5fc04629d4af2cbb5287d9354a8fb7de.png)

果然，就在 semantic-path.service.ts 裡：

![](https://img-blog.csdnimg.cn/img_convert/60f6903a69272734a1a0e6183542b63a.png)

在 semantic-path.service.ts 裡新增如下列印語句：

![](https://img-blog.csdnimg.cn/img_convert/f36af8667bf50cb501fd8b82c1dc873b.png)

![](https://img-blog.csdnimg.cn/img_convert/5a6425ec2a5bc9022679264a67d240ce.png)

我們看下第一行輸出，這個 / 和 login 是怎麼被解析的。

在 Login.componment.html 裡有個 pipe：

![](https://img-blog.csdnimg.cn/img_convert/2b1023e15f3874893ad2dbec64303870.png)

![](https://img-blog.csdnimg.cn/img_convert/1cdbf7f844c68397a0432b167c5fef86.png)

遇到下面這行程式碼：

```html
<ng-template>
  <a role="link" cxroute:="" cxurl="" rel="nofollow">{{
    'miniLogin.signInRegister' | cxTranslate
  }}</a>
</ng-template>
```

就會讀取 Spartacus 裡的配置，把基於語義的路由配置，轉換成 url.

從 routingConfigService 裡讀取配置：

![](https://img-blog.csdnimg.cn/img_convert/17aaf04e6de53fec067db4a8e4c5ed68.png)

login 頁面 url 搞清楚了，那麼 product 頁面呢？

奇怪，如果直接訪問如下 url：
http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115

![](https://img-blog.csdnimg.cn/img_convert/26930152ff7c835e64a7560b72395432.png)

頁面開啟後，沒有看到和 product 相關的執行邏輯：

![](https://img-blog.csdnimg.cn/img_convert/ca8b5817382505983a47b3bedc5629f4.png)

那麼 Spartacus 怎麼知道要載入 product 明細頁面呢？

我們後續的文章會分享。

SAP 電商雲 Spartacus UI 產品明細頁面路由路徑的自定義配置

相關文章