通过之前的学习，我们在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() {
    //略
  }
}