本教程第 77 篇文章發表之後，一位學習非常仔細的朋友發現了一個問題：

* [SAP UI5 應用開發教程之七十七 - SAP UI5 動態頁面路由的高階用法：路由記錄 routes 和 target 的一對多關係](https://blog.csdn.net/i042416/article/details/124548400)

> Hi,Jerry，我在復刻這個篇章的程式碼的時候遇到了一個問題：在mainfest.json檔案中配置routes時，若把該篇的新的路由路徑寫在最後，點選Home對應的按鈕會跳轉到Employee檢視去，但是瀏覽器上的路由路徑又是正確的，相關的原因和原理可以講講嗎？

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

# 簡要回顧步驟 77 完成的開發內容

在步驟 77，我們在 UI 上增添了一個新按鈕：

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

這個按鈕的事件響應函式：`this.getRouter().navTo("employeeOverview")`

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

這個 `navTo` 方法的輸入引數 `employeeOverview`，定義在 manifest.json 的 `routes` 區域裡，位於第 85 行的 `employees` 記錄之後。

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

點選 `Show Employees Overview` 按鈕之後，SAP UI5 路由框架從 manifest.json 檔案 `routes` 區域解析出的記錄裡，找到路由 target，即上圖高亮區域所示的配置資訊，然後按照下圖所示的順序載入三個對應的 XML 檢視檔案：

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

最後完成頁面渲染：

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

# 這位朋友遇到的問題

如果故意把步驟 77 新新增的 routes 陣列裡的元素，不放在正確的如圖例 1 所示的位置，即位於 employeeList 這條記錄之後，而是作為最後一條記錄，放在 `routes` 末尾，如下圖所示：

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

為了不影響步驟 77 的學習，我把資料夾 77 複製了一份出來，重新命名成 77-A，然後將上圖的改動，實現在了 77-A 資料夾的 manifest.json 裡面。

在 77-A 資料夾裡執行命令列 `ui5 serve`, 點選 `Show Employee Overview` 按鈕，會發生什麼事情？

我們會觀察到，SAP UI5 介面短暫顯示了 Employee 的明細頁面，即 `Employee.view.xml` 檔案裡的內容。

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

最後顯示的內容變成了 404 Not found

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

依次載入的 XML 檢視檔案如下：

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

為什麼會出現這種奇怪的現象？

[本文](https://jerry.blog.csdn.net/article/details/128654511)透過 SAP UI5 路由框架的實現原理，做出了深入的分析。

SAP UI5 應用 manifest.json 檔案裡 Routes 陣列元素的相對順序，不可忽視的試讀版