按钮组件
先看一个跳转界面按钮的demo

Button("跳转到界面2")  // 声明Button组件
  .width('40%')  // 设置宽度
  .height('20%')  // 设置高度
  .onClick(()=>{  // 设置好点击事件
    router.pushUrl({   // 这里跳转界面的逻辑与Flutter类似 采用路由跳转（需要加一个路由跳转的包）
      url:"pages/Index2" // 添加跳转界面的Url（字符串格式） 
    })  
  })

注意：
跳转过去的界面，需要在main_page.json中声明

{  
  "src": [  
    "pages/Index",  
    "pages/Index2"  // URL最好是把这个路径复制过去，不会出错，其他也可以保证正确就行
  ]  
}

整体的demo

// index.ets
import router from '@ohos.router'  
@Entry  
@Component  
struct Index {  
  @State message1: string = 'Harmony'  
  @State message2: string = '遥遥领先！'  
  build() {  
    Row() {  
      Column() {  
        Text(this.message1)  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
        Text(this.message2)  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
        Button("跳转到界面2")  
          .width('80%')  
          .height('8%')  
          .onClick(()=>{  
            router.pushUrl({  
              url:"pages/Index2"  
            })  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}

// index2.ets
import router from '@ohos.router'  
@Entry  
@Component  
struct Index {  
  @State message1: string = '界面2'  
  @State message2: string = '遥遥领先！'  
  build() {  
    Row() {  
      Column() {  
        Text(this.message1)  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
        Text(this.message2)  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
          .onClick(()=>{  //  点击文字  
            router.back() //  跳转回到来时的界面  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}

// main_pages.json json文件中不能有注释，复制的时候删掉这句注释！！！
{  
  "src": [  
    "pages/Index",  
    "pages/Index2"  
  ]  
}