5.4 实战：多个AbilitySlice间的路由和导航

Page模板用于提供与用户交互的能力。一个Page可以由一个或多个AbilitySlice构成。当一个Page由多个AbilitySlice共同构成时，这些AbilitySlice页面提供的业务能力应具有高度相关性。本节主要演示当一个Page包含多个AbilitySlice时，这些AbilitySlice之间是如何路由和导航的。

5.4.1 创建应用

采用Car设备类型，创建一个名为AbilitySliceNavigation的应用，如图5-4所示。该应用主要用于测试AbilitySlice之间的路由和导航。

5.4.2 创建多个AbilitySlice

在初始化应用时，AbilitySliceNavigation应用已经包含一个主AbilitySlice，代码如下：

因此，还需要再新增一个AbilitySlice。复制MainAbilitySlice的代码，创建一个PayAbilitySlice，代码如下。目前，MainAbilitySlice和PayAbilitySlice的代码完全相同。

5.4.3 新增PayAbilitySlice样式布局

为了体现MainAbilitySlice和PayAbilitySlice的不同，我们需要在“面子”上“整容”一下。在layout目录下新建一个ability_pay.xml，如图5-5所示。

ability_pay.xml的内容如下：

ability_pay.xml的内容基本上复制的是ability_main.xml，其主要差异如下。

（1）id设置为$+id:text_pay。

（2）text设置为Pay me the money。

ability_main.xml是提供给MainAbilitySlice使用的，而ability_pay.xml则是提供给PayAbilityS-lice使用的。

5.4.4 设置PayAbilitySlice样式布局

设置了ability_pay.xml之后，即可使用该样式布局。参考如下代码，通过super.setUIContent()指定新增的样式布局即可：

5.4.5 实现AbilitySlice之间的路由和导航

实现AbilitySlice之间的路由和导航的步骤如下。

1. 设置路由

在MainAbility中，通过addActionRoute()方法添加到PayAbilitySlice的路由，代码如下：

其中，action.pay指定路由动作的名称。该名称还需要在config.json的actions数组中进行添加，配置如下：

2. 设置单击事件触发导航

在MainAbilitySlice中为文本设置了单击事件，以便能够触发导航到PayAbilitySlice，代码如下：

上述代码中，当发起导航的AbilitySlice和导航目标的AbilitySlice处于同一个Page时，可以通过present()方法实现导航。

同理，在PayAbilitySlice中为文本设置了单击事件，以便能够触发导航到MainAbilitySlice，代码如下：

5.4.6 运行

运行应用，选中MainAbility类，再点击预览器（Previewer），可以看到图5-6所示的界面效果。

单击文本Hello World，可以切换到Pay me the money界面，如图5-7所示。

单击文本Pay me the money，可以切换到Hello World界面，至此实现了同个Page下多个Abil-itySlice之间的路由和导航。 4c4ytr7lo5n9GY1Tb5z26WNj5HoJwxb++5P2+RTkU2othmtxeA0r6pvTm1f579ux