HarmonyOS-基础之页面跳转

1、配置页面路由信息

resources --> base --> profile --> main_pages.json

{
  "src": [
    "pages/demo03/Index",
    "pages/demo03/Detail"
  ]
}

2、编写页面组件

Index.ets

/**
 * 路由跳转
 *  - 使用鸿蒙内置的router
 */
import router from '@ohos.router';


@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我是首页')
      Button('跳转到详情页面').onClick(() => {
        router.pushUrl({ url: 'pages/demo03/Detail' })
      })
    }.width('100%')
    .padding(20)
  }
}

Detail.ets

@Entry
@Component
struct Detail {
  build() {
    Column(){
      Text('我是详情页')
    }.width('100%')
    .padding(20)
  }
}

3、路由携带参数

/**
 * 路由跳转
 *  - 使用鸿蒙内置的router
 */
import router from '@ohos.router';


@Entry
@Component
struct Index {
  build() {
    Column({ space: 30 }) {
      /**
       * 注意：replace 和 push 的区别
       *   replace 直接替换路由，无法跳回
       *   push 只是覆盖一层，历史的路由信息还在，可以跳回
       */
      Text('我是首页')
      // push写法跳转页面
      Button('push 跳转到详情页面').onClick(() => {
        router.pushUrl({ url: 'pages/demo03/Detail' })
      })
      // replace写法跳转页面
      Button('replace 跳转页面').onClick(() => {
        router.replaceUrl({ url: 'pages/demo03/Detail' })
      })
      // 跳转页面携带参数
      Button('携带参数 跳转页面').onClick(() => {
        router.pushUrl({ url: 'pages/demo03/Detail', params: { id: 1 } })
      })
    }.width('100%')
    .padding(20)
  }
}

注意:replace 和 push 的区别

• replace 直接替换路由，无法跳回
• push 只是覆盖一层，历史的路由信息还在，可以跳回