Harmony OS个人项目——简单记账APP（3）

页面跳转实现

一、基础知识

1、页面路由：指在应用程序中实现不同页面之间的跳转和数据传递。

2、Router有两种页面跳转模式，分别是：

（1）router.pushUrl()：目标页不会替换当前页，而是压入页面栈，因此可以用router.back()返回当前页。

（2）router.replaceUrl()：目标页替换当前页，当前页会销毁并释放资源，无法返回当前页。

3、Router有两种页面实例模式，分别是：

（1）standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶。

（2）Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同Url页面会会被移动到栈顶并重新加载。

4、步骤：

（1）导入HarmonyOS提供的Router模板

import router from '@ohos.router';

（2）利用router实现跳转、返回等操作：

//跳转到指定路径，并传递参数
router.pushUrl(
    {                                  //RouterOptions
        url: 'pages/ImagePage',        //-url: 目标页面路径
        params: {id: 1}                //-params: 传递的参数（可选）
    },
    router.RouterMode.Single,          //页面模式：RouterMode枚举
    err => {
        if(err){                       //异常响应回调函数，错误码：
            console.log('路由失败。')   // - 100001：内部错误，可能是渲染失败
        }                              // - 100002：路由地址错误
    }                                  // - 100003：路由栈中页面超过32
)

二、APP代码实现

1、首页跳转实现

有五个按钮，分别跳转到相应的操作页面，这五个页面都有一个返回按钮，返回到首页，所以首页作为当前页时需要保留，方便操作，所以使用的是replaceUrl，具体代码如下：

import router from '@ohos.router'

@Entry
@Component
struct Index {

  build() {
    Column() {
      Row(){
        //明细图标：用于跳转到明细详情页
        Column(){
          Image($r('app.media.detailed'))
            .width(50)
          Text('明细')
            .fontSize(15)
        }
        .width(70)
        //点击事件
        .onClick(() => {
          //页面路由，挑战到明细页面
          router.pushUrl(
            {
              url: 'pages/detailed'
            },
            router.RouterMode.Single,
            err => {
              if(err){
                console.log('加载明细页面失败')
              }
            }
          )
        })
        //账单图标：用于跳转到账单页
        Column(){
          Image($r('app.media.bill'))
            .width(45)
          Text('账单')
            .fontSize(15)
        }
        .width(70)
        //点击事件
        .onClick(() => {
          //页面路由，跳转到账单页面
          router.pushUrl(
            {
              url: 'pages/bill'
            },
            router.RouterMode.Single,
            err => {
              if(err){
                console.log('加载账单页面失败')
              }
            }
          )
        })
        //添加图标：用于添加一笔账目信息
        Column(){
          Button('+')
            .fontSize(60)
            .backgroundColor(Color.Pink)
            .borderColor(Color.Black)
            //点击事件
            .onClick(() => {
              //页面路由，跳转到添加账目页面
              router.pushUrl(
                {
                  url: 'pages/addAccounts'
                },
                router.RouterMode.Single,
                err => {
                  if(err){
                    console.log('加载添加账目页面失败')
                  }
                }
              )
            })
        }
        .width(90)
        //存钱图标：用于跳转到存钱页面
        Column(){
          Image($r('app.media.statistics'))
            .width(40)
            .margin({bottom: 7})
          Text('统计')
            .fontSize(15)
        }
        .width(70)
        //点击事件
        .onClick(() => {
          //页面路由，跳转到统计页面
          router.pushUrl(
            {
              url: 'pages/statistics'
            },
            router.RouterMode.Single,
            err => {
              if(err){
                console.log('加载统计页面失败')
              }
            }
          )
        })
        //我的图标：用于跳转到账号管理页面
        Column(){
          Image($r('app.media.mine'))
            .width(40)
          Text('我的')
            .fontSize(15)
        }
        .width(70)
        //点击事件
        .onClick(() => {
          //页面路由，跳转到我的页面
          router.pushUrl(
            {
              url: 'pages/mine',
            },
            router.RouterMode.Single,
            err => {
              if(err)
                console.log('加载我的页面失败')
            }
          )
        })
      }
      .width('100%')
      .height(100)
      .position({x: 0,y: 690})
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.background'))
    .backgroundImageSize({width: 370, height: 750})
  }
}

2、其他页面跳转实现

其他页面之间没有互相跳转的需要，所以当前页不需要保留，使用的是replaceUrl，此处以我的页面展示，其余相似，如下：

更正：此处的onclick应该添加到image组件下，而不是Row容器下，因为是点击返回按钮起作用实现跳转，而点击标题文字没有作用。

三、实现效果

页面跳转实现