*注：样本代码位于https://github.com/Yelcho/UI5-Nested-Comp-Routing/

几个月前，我写了一篇博客，描述了如何在UI5应用程序中使用基于组件的路由。

在博客中，小企业管理软件免费，我提到了我是如何遇到嵌套组件之间的路由问题的，以及我的解决方法。从那以后，我提出的问题在SAPUI5库的1.72版本中得到了解决。在这个博客中，我描述了最新的库现在如何支持到嵌套组件的路由。

对于嵌套组件，我们会遇到这样的情况。

这个图表示3个不同的组件。每个组件都有自己的视图和路由器，用于在这些视图之间导航。

主要组件的路由器配置为导航到各自的子组件。这些子组件可能有许多不同的路由，有些可能使用路由参数来传递上下文信息。因此，重要的是主路由器可以将这些参数传递给子路由器sap.ui.core.路由.路由器类"navTo"方法已得到增强，大数据分析方法，以支持向嵌套组件的路由器传递路由信息。你可以在这里找到文档。

在我最初的博客中，我描述了如何配置路由器以支持嵌套组件。您可能会发现有必要回顾这些细节，以了解基于组件的路由是如何工作的。

主要组件的相关部分清单.json定义"产品"子组件的文件如下…

注意…

组件是如何在sap.ui5版本.组件用法部分路由已指定前缀属性使用类型"Component"和引用sap.ui5版本.componentUsages部分。

"产品"组件的路由配置包含详细信息页的路由，该页使用"id"参数传递相关产品的主键。

使用新的增强sap.ui.core.路由.路由器例如，商城返利，class I现在可以使用主路由器导航到products组件并传递参数，这些参数告诉它使用product id 4打开"详细"路由。

但是仍然存在一个未解决的问题。如果我想从一个子组件导航到另一个子组件，源组件需要能够调用主组件路由器的"navTo"方法，而不是它自己的路由器。那么如何从子组件中找到主路由器呢？

我决定递归地沿着子组件的祖先树走，海淘返利，直到找到主组件。为了能够准确地识别主组件，我将其名称传递给子组件，方法是将其定义为清单.json主组件的文件。

然后我可以从子组件中找到父组件，像这样…

…然后找到主组件路由器像这样…

那么现在从一个子组件导航到另一个子组件的事件处理程序将像这样…

来自SAP的Jiawei Cao，他负责更改sap.ui.core.路由.路由器类，提出了另一种子组件连接到主路由器的方法。

他在主路由器的目标缓存上使用"created"事件路由器为每个子组件路由选项构建事件处理程序。那么，他没有直接调用主路由器，企业应用开发，而是触发相应的事件来触发处理程序，该处理程序调用主路由器的"navTo"方法，并提供子组件路由器所需的路由信息。

因此，他的事件处理程序看起来像这样……

他的完整示例可以在UI5 SDK中找到在https://github.com/SAP/openui5/tree/master/src/SAP.ui.core/test/SAP/ui/core/demokit/sample/RoutingNestedComponent

在它像其他示例一样正确链接到SDK之前，找到它的最佳方法可能是克隆https://github.com/SAP/openui5存储库到您的本地系统并在那里查看。

最后，我从以前的博客中提取了一些示例，并对它们进行了更新，以使用这个新的路由概念。您可以在以下位置找到更新的代码https://github.com/Yelcho/UI5-Nested-Comp-Routing并在https://yelcho.github.io/UI5嵌套组件路由/。