导航到具有硬编码模式的路由

学习目标

导航到具有硬编码模式的路由

硬编码路由模式

每当向 URL 添加哈希值时，路由器都会检查是否存在模式匹配的路由。SAPUI5 提供不同类型的路由模式用于配置路由。

路由代码，其中突出显示了名为 detail 的路由。

在所示示例中，定义了一个名为 detail 的路由，会为其显示名为 detail 的目标，而该目标又用于加载名为 Detail 的视图。

为定义该路由，使用了硬编码模式 detail。仅当浏览器的哈希值为 detail 时，该模式才会匹配，并且不会向该路由的事件传递任何数据。

用于导航的方法

使用路由器的 navTo 方法，通过相应地设置浏览器的哈希值来导航到特定路由。

要从视图控制器访问路由器实例，你可以使用控制器的 getOwnerComponent 方法来获取对所属组件的访问权限，该组件提供 getRouter 方法。

navTo 方法具有以下参数：

sName
路由的名称
oParameters （可选）- 路由的参数
oComponentTargetInfo （可选）- 嵌套组件中路由名称和路由器参数的信息
bReplace （可选）- 如果设置为 true，则替换哈希值，并且浏览器历史记录中将不会留下条目。如果设置为 false（默认值），则设置哈希值，并将该条目存储在浏览器历史记录中。

访问路由器实例并触发导航

使用 navTo 方法的示例路由器代码。

在所示示例中，在视图控制器的事件处理方法中使用了路由器的 navTo 方法来导航到名为 detail 的路由。这会将 detail 路由的模式 detail 设置为浏览器的哈希值。随后 SAPUI5 会对浏览器的 hashchange 事件作出反应，以查找与该哈希值匹配的路由。这会导致 detail 路由的目标——最终是 Detail 视图——显示在浏览器中。

导航到具有硬编码模式的路由

业务场景

在上一个练习中为应用设置了路由之后，你现在将基于此实现一个基本导航。

最终目标是实现以下场景：当用户在客户表中选择一个条目时，他们应被导航到一个名为 Detail 的视图，该视图用于显示所选客户的附加信息。

作为实现该场景的第一步，你将在本练习中建立从 Overview 视图到 Detail 视图的基本导航。Detail 视图上暂时不会显示任何客户数据。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/22_routing_configuration模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/23_routing_with_hard-coded_patterns

任务 1：实现 Detail 视图

注意

为简单起见，项目中已包含实现 Detail 视图所需的文件 Detail.view.xml 和 Detail.controller.js。但是，该视图上目前还没有任何 UI 元素，控制器实现也仍为空。对于本练习，Detail 视图上只需要一个带可翻译标题的 Page UI 元素。你将在接下来的步骤中实现它。

步骤

在编辑器中打开 *i18n* 文件夹中的 *i18n.properties* 资源包文件。
向 *i18n.properties* 文件中添加以下键值对，以便为下一步要创建的 Page UI 元素定义可翻译的标题：

# Detail View
detailPageTitle=Customer Details

结果

i18n.properties 资源包文件现在应如下所示：生成的 i18n.properties 文件。 3. 现在在编辑器中打开 *webapp/view* 文件夹中的 *Detail.view.xml* 文件。 4. 向视图中添加以下代码，以显示一个带有上述标题的（仍为空的）页面：

<Page title="{i18n>detailPageTitle}">
<content>
</content>
</Page>

结果

Detail 视图现在应如下所示：

Detail.view.xml 文件，其中突出显示了 Page 标签。

任务 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": "app"
},
"routes": [
{
"name": "overview",
"pattern": "",
"target": [
"overview"
]
}
],
"targets": {
"overview": {
"viewId": "overview",
"viewName": "Overview",
"viewLevel": 1
}
}
}

向 routes 数组添加以下对象，以定义一个名为 detail 的路由：当浏览器的哈希值等于 detail 时，会为其显示名为 detail 的目标：

{
"name": "detail",
"pattern": "detail",
"target": [
"detail"
]
}

注意

所引用的 detail 目标将在下一步中定义。

结果

路由配置现在应如下所示： manifest.json 文件，其中突出显示了 detail 路由。 4. 最后，向 targets 对象添加以下属性，以指定上面引用的 detail 目标将用于加载 Detail 视图：

"detail": {
"viewId": "detail",
"viewName": "Detail",
"viewLevel": 2
}

结果

路由配置现在应如下所示：

manifest.json 文件，其中突出显示了 detail 目标

任务 3：在选择客户时触发导航

上面完成的路由配置会使路由器在浏览器的哈希值等于 detail 时，将 Detail 视图加载到 App UI 元素的 pages 聚合中。因此，在接下来的步骤中，当用户从客户表中选择一个客户时，你将通过路由器的 navTo 方法将浏览器的哈希值设置为该值。

步骤

在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。
向客户表中的 <ColumnListItem> 标签添加以下两个属性：

type="Navigation" press=".onNavToDetails"

注意

Navigation 类型表示表格行可导航以显示附加信息。选择某一行时，会调用 onNavToDetails 事件处理方法，该方法在下一步中实现，并在其中触发导航。

结果

客户表现在应如下所示： Overview.view.xml 文件，ColumnListItem 标签。 3. 现在在编辑器中打开 *webapp/controller* 文件夹中的 *Overview.controller.js* 文件。 4. 如下所示向视图控制器添加 onNavToDetails 事件处理方法，以触发到 Detail 视图的导航：

onNavToDetails: function () {
var oRouter = this.getOwnerComponent().getRouter();
oRouter.navTo("detail");
}

注意

在该方法的实现中，会访问路由器实例。在其上调用 navTo 方法以导航到路由配置中指定的 detail 路由。这会将 detail 模式设置为浏览器的哈希值，从而使 Detail 视图显示。

结果

视图控制器现在应具有以下附加方法： Overview.controller.js 文件，其中突出显示了 onNavToDetails 行。 5. 通过从 SAP Business Application Studio 中启动应用来测试运行你的应用。

小心

如果你未连接到后端系统，请使用 start-mock npm 脚本启动应用。确保在客户表中选择客户时显示 Detail 视图（该视图为空）。注意

请记住，目前尚不支持从 Detail 视图导航回 Overview 视图。这将在下一个练习中实现。

右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后在出现的上下文菜单中选择 预览应用。
在出现的对话框中选择名为 start-mock 的 npm 脚本。
在打开的应用中，检查该组件是否按预期工作。