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

张开发
• 2026/4/15 19:30:51 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

鸿蒙_一行代码实现页面间的跳转
通过之前的学习我们在pages目录下增加了MyPage.ets页面我们来看一下如何在默认页面Index.ets跳转到另一个页面。首先分析下如下图所示在页面中有一个onClick方法功能为点击后改变message的值即将预览器上显示的“Hello World”改为“Welcome”我们来把它修改为点击后跳转到MyPage页面。那么怎么来实现页面跳转呢其实很简单只需一行代码修改为如下格式即可this.getUIContext().getRouter().pushUrl({ url: pages/页面名称 })我们看一下这行代码是先获取到当前的UIContextUI上下文对象再获取到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() { //略 } }

更多文章