鸿蒙_一行代码实现页面间的跳转

通过之前的学习，我们在pages目录下增加了MyPage.ets页面，我们来看一下如何在默认页面（Index.ets）跳转到另一个页面。首先分析下，如下图所示，在页面中有一个onClick方法，功能为点击后改变message的值，即将预览器上显示的“Hello World”改为“Welcome”，我们来把它修改为点击后跳转到MyPage页面。

那么怎么来实现页面跳转呢，其实很简单，只需一行代码，修改为如下格式即可：

this.getUIContext().getRouter().pushUrl({ url: 'pages/页面名称' })

我们看一下这行代码，是先获取到当前的UIContext（UI上下文对象），再获取到Router（页面路由），这个页面路由就是负责页面管理的，其中pushUrl为向页面路由栈中加入一个页面信息，url参数为页面的路径。

需要注意的是，此处的页面名称是不带.ets后缀的，比如要从Index页面跳转到MyPage页面的完整代码为（为了加以区分两个页面，我们把显示文字也略作修改）：

@Entry @Component struct Index { @State message: string = 'Index 页面'; //修改下显示的文字 build() { RelativeContainer() { Text(this.message) .id('HelloWorld') .fontSize($r('app.float.page_text_font_size')) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: '__container__', align: VerticalAlign.Center }, middle: { anchor: '__container__', align: HorizontalAlign.Center } }) .onClick(() => { //this.message = 'Welcome'; //页面跳转的代码： this.getUIContext().getRouter().pushUrl({ url: 'pages/MyPage' }) }) } .height('100%') .width('100%') } }

另一个MyPage页面也略作修改，最后我们测试下，点击Index页面的文字，就会打开MyPage页面了。

@Entry @Component struct MyPage { @State message: string = 'My Page 页面'; //修改显示文字 build() { //略 } }