2.4　实战：Ability内页面的跳转和数据传递

Ability的数据传递包括Ability内页面的跳转和数据传递、Ability间的数据跳转和数据传递。本节主要讲解Ability内页面的跳转和数据传递。

打开DevEco Studio，选择一个Empty Ability工程模板，创建一个名为ArkUIPagesRouter的工程为演示示例。

2.4.1　新建Ability内页面

初始化工程之后，会生成以下内容：

·　在src/main/ets/entryability目录下，初始会生成一个Ability文件EntryAbility.ts。可以在EntryAbility.ts文件中根据业务需要实现Ability的生命周期回调内容。

·　在src/main/ets/pages目录下，会生成一个Index页面。这也是基于Ability实现的应用的入口页面。可以在Index页面中根据业务需要实现入口页面的功能。

为了实现页面的跳转和数据传递，需要新建一个页面。在src/main/ets/pages目录下，可以通过右击New→Page来新建页面，如图2-5所示。

在原有Index页面的基础上，新建一个名为Second的页面，如图2-6所示。

Second页面创建完成之后，会自动做两个动作。一个动作是在src/main/ets/pages目录下创建一个Second.ets文件。Second.ets文件内容如下：

另一个动作是将Second页面信息配置到src/main/resources/base/profile/main_pages.json文件中。main_pages.json文件内容如下：

分别把Index.ets和Second.ets的message变量值改为“Index页面”和“Second页面”以示区别。

2.4.2　页面跳转及传参

页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面URL找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的URL访问不同的页面，包括跳转到Ability内的指定页面、用Ability内的某个页面替换当前页面、返回上一个页面或指定的页面等。通过params来传递参数。

在使用页面路由之前，需要先导入router模块，代码如下：

    //导入router模块
    import router from '@ohos.router';

页面跳转有以下几种方式，根据需要选择一种方式跳转即可。

1　router.push()

通过调用router.push()方法，跳转到Ability内的指定页面。每调用一次router.push()方法，均会新建一个页面。默认情况下，页面栈数量会加1，页面栈支持的最大页面数量为32。

当页面栈数量较大或者超过32时，可以通过调用router.clear()方法清除页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。

用法示例如下：

2　router.push()加mode参数

router.push()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下，如果目标页面在页面栈中已经存在同URL的页面，离栈顶最近的同URL的页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然保存在栈中，页面栈数量不变；如果目标页面在页面栈中不存在同URL的页面，那么按照标准模式跳转，页面栈数量会加1。

用法示例如下：

3　router.replace()

通过调用router.replace()方法，跳转到Ability内的指定页面。即使用新的页面替换当前页面，并销毁被替换的当前页面，页面栈数量依然不变。

用法示例如下：

4　router.replace()加mode参数

router.replace()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下，如果目标页面在页面栈中已经存在同URL的页面，离栈顶最近的同RUL的页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈数量会减1；如果目标页面在页面栈中不存在同URL的页面，那么按照标准模式跳转，页面栈数量不变。

用法示例如下：

最后，在Index.ets文件中添加按钮以触发跳转。Index.ets代码如下：

2.4.3　参数接收

通过调用router.getParams()方法获取Index页面传递过来的自定义参数。

可以调用router.back()方法返回上一个页面。

最终，完整的Second.ets代码如下：

2.4.4　运行

运行项目后，初始化界面如图2-7所示。

在Index页面中，单击“跳转”按钮后，即可从Index页面跳转到Second页面，并在Second页面中接收参数和进行页面刷新展示，页面效果如图2-8所示。

当在Second页面单击“返回”按钮后，则会回到如图2-7所示的Index页面。

以上就是完整的页面跳转及传参、接收参数的过程。 N0vB8J0GV0IFQ4NLTDUZta8yYAUb2/dQ9eMDPB/fBrAJMVlPf737IcIJDITuSeTP