鸿蒙开发 | 页面路由(route)

1、配置

模块配置module.json5中pages默认指向的目录是main_pages.json

所以路由文件就在这里配置。本次实验两个页面Index和Home页面，url指的是相对路径

{
  "src": [
    "pages/Index",
    "pages/components/Home"
  ]
}

2、使用

首先需要导入Router模块

import router from '@ohos.router';

router提供了两种跳转方式

• router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
• router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

3、实现代码

index页面包含内容

• 添加按钮通过pushUrl的方式跳转到Home页面并传值params: { id: '111', name: '张三' }
• 并接收通过路由传入的并展示出来

import router from '@ohos.router';

class Params {
  id: string;
  name: string;
}
@Entry
@Component
struct Index {
  @State params:Params = {
    id: '',
    name: ''
  }
  onPageShow() {
    this.params = router.getParams() as Params; // 获取传递过来的参数对象
  }

  build() {
    Column({ space: 30 }) {
      Button('Index').fontSize(30).height(60)
        .onClick(() => {
          router.pushUrl({
            url: 'pages/components/Home',
            params: {
              id: '111',
              name: '张三'
            }
          })
        })
      Text(`参数id：${this.params.id}`).fontSize(30).height(60)
      Text(`参数name：${this.params.name}`).fontSize(30).height(60)
    }
    .width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

Home页面包含内容

• 添加按钮通过back的方式返回到Index页面并传值{ id: '222', name: '李四' }
• 并接收通过路由传入的并展示出来

import router from '@ohos.router';

class Params {
  id: string;
  name: string;
}

@Entry
@Component
struct Home {
  @State params:Params = {
    id: '',
    name: ''
  }
  onPageShow() {
    this.params = router.getParams() as Params; // 获取传递过来的参数对象
  }

  build() {
    Column({ space: 30 }) {
      Button('Home').fontSize(30).height(60)
        .onClick(() => {
          router.back({
            url: 'pages/Index',
            params: {
              id: '222',
              name: '李四'
            }
          })
        })
      Text(`参数id：${this.params.id}`).fontSize(30).height(60)
      Text(`参数name：${this.params.name}`).fontSize(30).height(60)
    }
    .width('100%').height('100%').justifyContent(FlexAlign.Center)

  }
}

实现效果