ArkUI-15-页面路由

import  router from '@ohos.router'
import { Header } from '../components/CommonComponents'

class RouterInfo{
  //页面路径
  url:string
  title:string

  constructor(url: string, title: string) {
    this.url = url
    this.title = title
  }
}

@Entry
@Component
struct Index {
  @State message:string='页面列表'
  private routers:RouterInfo[]=[
    new RouterInfo('pages/PageTest01','图片查看案例'),
    new RouterInfo('pages/PageTest02','商品列表案例'),
    new RouterInfo('pages/PageTest03','Jack和他的女友案例'),
    new RouterInfo('pages/PageTest04','任务列表案例')
  ]

  build() {
    Column(){
      Header()
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .height(80)
        .onClick(()=>{
          this.message='hello ar0kts'
        })
      List({space:15}){
        ForEach(this.routers,(router:RouterInfo,index)=>{
          ListItem(){
            this.RouterItem(router,index+1)
          }
        })
      }.layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
      .width('100%')
    }
  }
  @Builder
  RouterItem(r:RouterInfo,i:number){
    Row(){
      Text(i +'.')
        .fontSize(20)
        .fontColor(Color.White)
      Blank()
      Text(r.title)
        .fontSize(20)
        .fontColor(Color.White)
    }
    .width('90%')
    .padding(12)
    .backgroundColor('#38f')
    .borderRadius(20)
    .shadow({radius:6,color:'#4F000000',offsetX:2,offsetY:2})
    .onClick(()=>{
      //router跳转
      router.pushUrl(
        {
          url:r.url,
          params:{id:i}
        },
        router.RouterMode.Single,
        (err) => {
          if (err) {
            console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
            return;
          }
        }
      )
    })
  }
}

----

import router from '@ohos.router';
import { Header } from '../components/CommonComponents';

@Entry
@Component
struct PageTest01 {
  @State message: string = 'Hello World1';

  build() {

    Row() {
      Column() {
        Header()
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button(this.message)
          .height('40')
          .fontSize(14)
          .position({x:100,y:100})
          .align(Alignment.Center)
          .onClick(()=>{
            router.back();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

{
  "src": [
    "pages/PageIndex",
    "pages/PageTest01",
    "pages/PageTest02",
    "pages/PageTest03",
    "pages/PageTest04"
  ]
}