启用路由
学习目标
在应用程序描述符中创建初始路由配置
路由概览
SAPUI5 提供基于哈希的导航，允许您构建单页应用，其中的导航通过更改哈希来完成。这样，浏览器无需重新加载页面。
基于哈希的导航支持书签以及指向应用内部页面的深层链接；这意味着您可以启动应用并恢复已添加书签的状态。
观看此视频，了解路由的原理。
视频：本节含 SAP 官方视频（视频 ID
1_lvbqxwdf），需在 learning.sap.com 在线观看。
路由配置
在应用程序描述符中，路由配置位于 sap.ui5 命名空间的 routing 属性中。它由以下三个部分组成：config、routes 和 targets。
config 部分包含全局路由器配置以及适用于所有路由和目标的默认值。
在所示示例中，使用属性 viewType 和 viewPath 来指定默认情况下所使用的所有视图均为 XML 类型，并且所使用的视图名称带有前缀 sap.training.exc.view。这意味着，稍后在定义目标时，只需指定 Overview 作为视图名称即可，例如，以便将 XML 视图 sap.training.exc.view.Overview 唯一标识为目标视图。
routerClass 属性定义了使用哪个路由器。routerClass 的可能值为 sap.ui.core.routing.Router、sap.m.routing.Router 以及 sap.ui.core.routing.Router 的任何其他子类。与 sap.ui.core.routing.Router 相比，sap.m.routing.Router 针对移动应用进行了优化，因为它不仅加载目标并将其放入相应的容器中，还会在导航期间触发动画。以下动画可供使用，可通过 transition 属性设置：slide（默认）、flip、fade 和 show
controlId 属性确定用作插入目标视图或组件的父级的控件。controlAggregation 属性定义了该控件的聚合，视图或组件将添加至该聚合。
async 属性定义目标是否以异步方式加载。
每个路由定义名称、模式以及可选的一个或多个目标，当路由匹配时导航到这些目标。该模式用于确定与该路由匹配的浏览器哈希。指定的目标必须在 targets 部分中定义。
目标定义要显示的视图或组件。它与一个或多个路由相关联，也可以在应用内部手动显示。每当显示目标时，都会加载相应的视图或组件，并将其添加到指定控件（controlId 属性）的指定聚合（controlAggregation 属性）中。
使用目标的 viewLevel 属性，您可以定义导航方向。例如，从较低视图层级导航到较高视图层级会导致前进导航。这对于 flip 和 slide 过渡尤为重要，因为 slide 动画应从左到右或反之。
在所示示例中，定义了一个名为 overview 的路由，如果浏览器哈希为空，则显示名为 overview 的目标。overview 目标加载 XML 视图 sap.training.exc.view.Overview。
初始化路由器
路由器需要由组件初始化。为此，请在 Component.js 组件控制器的 init 方法中获取对路由器的引用，并在其上调用 initialize 方法。
初始化后，manifest.json 中的路由配置会在应用程序中自动启用：将评估当前 URL，并自动显示相应的视图。
配置路由
业务场景
在以下练习中，该场景将通过一个导航选项进行扩展：当用户在客户表中选择一个客户时，将显示一个包含所选客户详细信息的新视图。
为了实现此导航，您必须调整应用程序的结构：到目前为止，组件一直使用 App 视图作为根视图，而该视图又包含一个 App UI 元素，Overview 被静态嵌入其 pages 聚合中。然而，对于导航而言，视图在 pages 聚合中的嵌入必须以动态方式完成。导航的实现方式是：通过路由器在 pages 聚合中交换视图。
在本练习中，您将首先重构应用程序，使 Overview 视图不再静态嵌入 App UI 元素的 pages 聚合中，而是通过路由配置动态嵌入。在接下来的练习中，您将在此基础上实现实际的导航。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/21_OData_model_(create)模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/22_routing_configuration
任务 1：从 App UI 元素的 pages 聚合中移除 Overview 视图
步骤
在编辑器中打开
*webapp/view*文件夹中的*App.view.xml*文件。删除视图实现中的以下行，以移除 Overview 视图在
AppUI 元素的pages聚合中的静态嵌入：
<pages>
<mvc:XMLView viewName="sap.training.exc.view.Overview"/>
</pages>
结果
App 视图现在应如下所示：
3. 将 id="app" 属性添加到 <App> 标签，为 App UI 元素设置 Id。
注意
该 Id 稍后将在路由配置中使用，以将 App UI 元素指定为插入视图的父级。
结果
App 视图现在应类似于以下内容：
任务 2：在应用程序描述符中配置路由
步骤
在编辑器中打开
*webapp*文件夹中的*manifest.json*应用程序描述符。在应用程序描述符中，查找
sap.ui5命名空间中的routing属性：
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "sap.training.exc.view",
"controlAggregation": "pages",
"controlId": "<...>"
},
"routes": [],
"targets": {}
}
注意
以下三个属性 config、routes 以及 targets 在 routing 部分中定义了应用程序的路由和导航结构。
将
controlId属性的"<...>"值替换为"app"，即上面为AppUI 元素分配的 Id。
注意
根据此配置，路由器现在会将视图添加到 pages 聚合，该聚合属于 App UI 元素。
结果
路由配置现在应如下所示：
4. 现在，将以下对象添加到 routes 数组：
{
"name": "overview",
"pattern": "",
"target": [
"overview"
]
}
注意
这定义了一个名为 overview 的路由，当浏览器哈希为空时，将显示名为 overview 的目标。所引用的 overview 目标将在下一步中定义。
结果
路由配置现在应如下所示：
5. 最后，将以下属性添加到 targets 对象：
"overview": {
"viewId": "overview",
"viewName": "Overview",
"viewLevel": 1
}
注意
这定义了上文引用的 overview 目标将用于加载 Overview 视图。
结果
路由配置现在应如下所示：
任务 3：初始化路由器
步骤
在编辑器中打开
*webapp*文件夹中的*Component.js*文件。将以下代码添加到组件控制器的
init方法末尾：
// enable routing
this.getRouter().initialize();
注意
上面完成的路由配置会使路由器在浏览器哈希为空时将 Overview 视图加载到 pages 聚合，该聚合属于 App UI 元素。要为应用程序启用此配置，需在此处初始化路由器。
结果
组件控制器的初始化方法现在应如下所示：
3. 通过从 SAP Business Application Studio 启动应用程序来进行测试运行。
小心
如果您未连接到后端系统，请使用 start-mock npm 脚本启动应用程序。 确保从用户角度看，应用程序的运行没有变化：浏览器中显示 Overview 视图。但是，与之前的实现不同，Overview 视图现在通过路由嵌入到 pages 聚合，该聚合属于 App UI 元素。
右键单击 sapui5-development-learning-journey 项目中的任意子文件夹，然后从出现的上下文菜单中选择 Preview Application。
在出现的对话框中选择名为 start-mock 的 npm 脚本。
在打开的应用程序中，检查组件是否按预期工作。