第33步:路由回溯和历史

说明

现在我们可以导航到详细信息页面并显示发票，但是我们还不能回到概述页面。我们将在详细页面中添加一个后退按钮，并实现一个再次显示概览页面的函数。

---

预览

一个后退按钮现在显示在详细页面上

代码

您可以在演练-步骤33查看和下载所有文件。

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.Detail"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Page
		title="{i18n>detailPageTitle}"
		showNavButton="true"
		navButtonPress=".onNavBack">
		<ObjectHeader
			intro="{invoice>ShipperName}"
			title="{invoice>ProductName}"/>
	</Page>
</mvc:View>

在详细信息页面上，我们将参数showNavButton设置为true，并注册一个事件处理程序，该事件处理程序在按下后退按钮时被调用。

webapp/controller/Detail.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History"
], function (Controller, History) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {

		onInit: function () {
			var oRouter = this.getOwnerComponent().getRouter();
			oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
		},

		_onObjectMatched: function (oEvent) {
			this.getView().bindElement({
				path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath),
				model: "invoice"
			});
		},

		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);
			}
		}

	});
});

我们加载一个新的依赖项，它帮助我们从 sap.ui.core.routing 命名空间管理导航历史，并将事件处理程序的实现添加到我们的详细页面控制器。

在事件处理程序中，我们访问导航历史并尝试确定之前的hash。与浏览器历史记录相反，只有当应用程序中的导航步骤已经发生时，我们才会得到有效的结果。然后，我们将简单地使用浏览器历史记录回到上一页。如果以前没有导航，我们可以告诉路由器直接进入概览页面。第三个参数true告诉路由器用新的历史记录状态替换当前的历史记录状态，因为我们实际上是自己做一个返回导航。第二个参数是一个空数组({})，因为我们没有向这个路由传递任何额外的参数。

对于我们的用例来说，这个实现比浏览器的后退按钮好一点。浏览器会简单地退回历史的一步，即使我们在应用程序之外的另一个页面上。在应用程序中，我们总是想回到概述页面，即使我们是从另一个链接或直接打开的详细页面书签。你可以尝试通过加载一个新标签页的细节页，并单击应用程序中的后退按钮，它仍然会回到概述页。

约定

• 添加一条路径，以便在历史记录状态不明确时返回到父页。

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性