一、認識組件

關于HarmonyOS中ArkTS的基礎組件請參見文章鴻蒙4.0開發筆記之ArkTs語言基礎與基本組件結構（四）

二、實現頁面跳轉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 = '無際鷹'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頁面。