返回路由

学习目标

实现返回初始页面的导航

返回导航

要在应用中返回，用户可以使用浏览器原生的返回按钮。然而，这个返回按钮始终使用浏览器历史记录来导航返回。这意味着，如果你在浏览器中以某个哈希值启动应用，然后按下返回按钮，应用就会通过该按钮退出。

示例代码，展示 onNavBack 函数，如正文所述。

为改变此行为，在所示示例中为该应用实现了一个单独的返回按钮。在相应的 onNavBack 事件处理方法的实现中，使用 sap/ui/core/routing/History 模块来访问 SAPUI5 应用的导航历史。history 对象的 getPreviousHash 方法用于检查应用历史中是否存在前一个哈希值。如果存在，应用就通过浏览器原生的 history API 导航到前一个哈希值。在这种情况下，应用的返回按钮的功能与浏览器原生返回按钮的功能一致。

但是，如果不存在前一个哈希值，应用就通过路由器导航到名为 overview 的路由。也就是说，它导航到应用内的另一个页面，而在这种情况下使用浏览器原生返回按钮会退出应用。

调用 navTo 方法时的第二个参数是一个空对象，因为没有向该路由传递任何附加参数。第三个参数的值为 true，它确保哈希被替换，因此浏览器历史记录中不会留下条目。

添加返回导航

业务场景

在上一个练习中，你实现了从概览视图到详细信息视图的导航。在本练习中，你将设置相应的返回导航：从详细信息视图到概览视图。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/23_routing_with_hard-coded_patterns模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/24_back_navigation

任务 1：为详细信息视图添加用于返回导航的按钮

步骤

在编辑器中打开 *webapp/view* 文件夹中的 *Detail.view.xml* 文件。
向 <Page> 标签添加以下两个属性，以显示返回按钮并注册在按下返回按钮时调用的事件处理器：

showNavButton="true" navButtonPress=".onNavBack"

注意

该 onNavBack 事件处理方法将在后续步骤中实现。

结果

详细信息视图现在应如下所示：

Detail.view.xml 的屏幕截图，突出显示 showNavButton 和 navButtonPress 属性。

任务 2：在视图控制器中实现按钮事件处理器

步骤

在编辑器中打开 *webapp/controller* 文件夹中的 *Detail.controller.js* 文件。
为了在 onNavBack 事件处理方法的实现中管理导航历史，请将 sap/ui/core/routing/History 模块添加到视图控制器的依赖项数组中，并向工厂函数添加一个名为 History 的相应参数。

结果

视图控制器现在应如下所示： Detail.controller.js 文件，突出显示 sap/ui/core/routing/History 代码。 3. 现在在视图控制器上按如下方式实现 onNavBack 事件处理方法，以便在按下返回按钮时显示概览视图：

onNavBack: function () {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
var oRouter = this.getOwnerComponent().getRouter();
oRouter.navTo("overview", {}, true);
}
}

注意

在事件处理器的实现中，如果应用中已经执行过导航步骤，则使用浏览器历史记录返回上一页。如果应用中尚未执行过任何导航，则使用路由器导航到概览视图。也就是说，即使应用是通过直接调用详细信息视图启动的，返回按钮也会导向概览视图，而不是应用外部的页面。

结果

视图控制器现在应如下所示： Detail.controller.js 文件，突出显示 sap/ui/core/routing/History 代码。 4. 从 SAP Business Application Studio 启动应用以进行测试运行。

警告

如果你未连接到后端系统，请使用 start-mock npm 脚本启动应用。确保现在可以从详细信息视图导航回概览视图。

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