ArkTs学习之DevEco Studio页面操作router的pushUrl页面跳转与back返回上一页

一、实现页面跳转pushUrl

1、操作说明

实现页面跳转的核心便是router.pushUrl的调用，操作起来也很简单，总共就四步。实现步骤如下：

• 1.在项目列表的page目录下创建一个新的页面

  

• 2. 创建button，并设定基本属性方法

• 3.给button添加onclick事件方法

• 4.在事件方法中调用router.pushUrl()事件方法，并设定需要跳转的页面的路径。
  

  .onClick(()=>{
  　　//执行跳转到Target页面：使用router路由可以指定跳转到某个url页面
  　　router.pushUrl({
  　　　　//在entry>src>main>resources>base>profile>main_pages.json中可以找到整个项目所有的页面
  　　　　url:"pages/Target"
  　　})
  })

❗️注意：可以在项目路径下的entry>src>main>resources>base>profile>main_pages.json中找到整个项目所有的页面。

2、实现代码

import router from '@ohos.router'
@Entry
@Component
struct Arrow {
    @State message: string = '鸿蒙Next'
    build() {
    Column() {
        //文本
        Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        //按钮
        Button('点我跳转')
        .fontSize(30)
        .width('50%')
        .height('50vp')
        //跳转页面动作
        .onClick(()=>{
             //执行跳转到Target页面：使用router路由可以指定跳转到某个url页面
             router.pushUrl({
             //在entry>src>main>resources>base>profile>main_pages.json中可以找到整个项目所有的页面
                 url:"pages/Target"
             })
         })
    }

   //设置Column容器的宽、高
   .width('100%')
   .height('100%')
  }
}            

最终的实现效果就是，点击页面上的“点我跳转”按钮，就会成功跳转到“Target”页面。

二、返回上一个页面back

当页面跳转到“Target”页面后，如何在该页面返回到上一个页面呢？

其实只需要调用一个router.back()事件方法就OK了。实现代码如下：

import router from '@ohos.router'
@Entry
@Component
struct Target {
@State message: string = 'Harmony OS'
    build() {
        Row() {
            Column() {
                Text(this.message)
                .fontSize(50)
                .fontWeight(FontWeight.Bold)
                .fontStyle(FontStyle.Italic)
                .backgroundColor(Color.Blue)
                .fontColor(Color.Orange)
                .onClick(()=>{
                    //返回上一个页面，及从哪里跳转来的，就回到哪里去
                    router.back()
                })
            }
            .width('100%')
        }
        .height('100%')
    }
}        

这样的整体效果就是，在Arrow页面上点击页面上的“点我跳转”按钮，就会成功跳转到Target页面；然后在Target页面点击“无际鹰”就会跳转回Arrow页面。