为全屏应用程序应用路由配置
学习目标
为全屏应用程序应用路由配置。
为全屏应用程序实现路由
路由与导航
如前所述，SAPUI5 允许您构建单页应用，其中的导航通过更改哈希值来完成。在本课中，我们将学习如何为全屏应用程序配置和实现导航。
如您所学，路由用于通知您的应用程序哈希值已更改为某个特定值。路由的模式会与哈希值进行匹配。如果模式匹配，路由会将通过哈希传递的数据提供给已定义的处理程序。
根视图配置
在 *manifest.json* 文件中，"sap.ui5" 部分应有一个 "rootView" 部分，用于定义应用程序的入口点。在大多数情况下是 App 视图。
还提供了 app 控件的 id。
路由的 URL 模式
请记住，每当向 URL 添加哈希值时，路由器都会检查是否存在模式匹配的路由。它会采用第一个匹配的路由，并调用相应的目标视图。随哈希提供的数据会传递给该目标。
路由的 pattern 参数定义了要与哈希进行匹配的字符串。
让我们详细回顾不同类型的模式：
硬编码部分
必需参数
可选参数
必需查询参数
可选查询参数
路由的 URL 模式
模式类型 |
示例 |
|
|---|---|---|
硬编码部分 |
"carrier/settings" |
该模式仅在浏览器的哈希为 carrier/settings 时匹配。不会向 Route 的事件传递任何参数。 |
必需参数 |
"carrier/{carrierid}" |
{carrierid} 是必需参数。例如，以下哈希会匹配：carrier/AA。Route 的匹配事件将在其参数中接收 AA 作为 carrierid。哈希 carrier/ 不会匹配。 |
可选参数 |
"carrier/{carrierid}/showtab/:tabid:" |
:tabid: 是可选参数。例如，以下哈希会匹配：carrier/AA/bookings |
必需查询参数 |
"carrier{?query}" |
{?query} 允许您传递带任意参数的查询。例如，以下哈希会匹配：carrier?first=value1 carrier?first=value1&second=value2 |
可选查询参数 |
"carrier/{carrierid}/flights:?query:" |
:?query: 是可选查询参数。例如，以下哈希会匹配：carrier/AA/flights?from=New York carrier/AA/flights |
应用于全屏应用程序的路由
在本视频中，让我们看看全屏应用程序中的路由。
视频：本节含 SAP 官方视频（视频 ID
1_3twg3kv9），需在 learning.sap.com 在线观看。
探索全屏应用程序的路由配置
业务示例
在以下练习中，您将使用 SAPUI5 探索全屏应用程序的路由配置。
前提条件
您应已完成上一个练习，以导入该全屏应用程序。
步骤
查看路由配置，并检查全屏应用程序导航所需的一切是否都已就位。 什么是根视图？ 查看 controlAggregation、controlId 和 clearControlAggregation 属性。 有多少个目标？多少条路由？为什么？ 打开 Flights 视图的模式是什么？
打开
*manifest.json*文件。查找
rootView部分。 rootView 是 App 视图。查找
routing部分。检查 config 部分。 controlAggregation 是 pages ，controlID 是 App ，而 clearControlAggregation 设置为 false 。
检查 routes 和 targets 部分。 共有三个目标（overview、flights 和 notFound）和两条路由（用于 overview 和 flights）。notFound 目标作为绕过项（bypass）用在 config 部分中。
注意打开 Flights 视图的路由模式。 打开 Flights 视图的模式是： carriers/{carrid}
预览该应用程序。 如果您尝试手动输入 flights 视图模式会发生什么？（例如在当前 URL 末尾添加 &/carriers/AA ）。 如果您输入错误的模式会发生什么？（例如在默认 URL 末尾添加 &/carrier ）。
右键单击
*webapp*文件夹并选择 Preview Application。选择 start local... 应显示承运商列表。
更改 URL 以输入有效的模式，例如添加
&/carriers/AA。 显示的是 Flights 视图，但没有数据。尚未与数据服务设置任何绑定。更改 URL 以输入错误的模式，例如更改为
&/carrier/AA。 显示的是 NotFound 视图。如果您选择 Go Back 按钮，您会返回到 Flights 视图。