鸿蒙开发 之 ArkUI路由

1.页面路由

页面路由是指在应用程序中实现不同页面之间的跳转和数据传递
比如说你打开一个app，首先进入的是登陆页，首页，列表搜索页，详情页，你打开几个页面都会存储在页面栈里，页面栈的最大容量上限为32个，使用router.clear()方法可以清空页面栈，释放内存，开发过程中要注意不要等到上限再清除

Router有两种页面跳转模式分别是
router.pushUrl()：目标页不会替换当前页，而是压入页面栈，因此可以用router.back返回当前页 比如 列表页跳详情页
router.replaceUrl()：目标页替换当前页，当前页会被销毁并释放资源，无法返回当前页 比如 登陆页

Router有两种页面实例模式，分别是：
standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶，默认就是这种模式
single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同url页面会被移动到栈顶并重新加载

2.使用方法

2.1 导入HarmonyOS提供的Router模块

//固定写法
import router from "@ohos.router";

2.2 使用router

router.pushUrl(
{
  url:'pages/Imagepage',
  params:{id:1}
},
router.RouterMode.Single,//页面模式RouterMode枚举
err=>{
  if(err){
  //100001:内部错误可能是渲染失败
  //100002:路由地址错误
  //100003:路由栈中页面超过32
    console.log('路由失败')
  }
}
)

//路由取值
params:any=router.getParams()
//返回上一页
router.back()
//返回指定页并携带参数
router.back({
  url:'page/index',
  params:{id:10}
})

3.案例

import RouterInfo from '../viewmodel/RouterInfo'
import IndexFontSizePanel from '../views/IndexFontSizePanel'
import RouterItem from '../views/RouterItem'
import PreferencesUtil from '../common/util/PreferencesUtil'

const routers: RouterInfo[] = [
  new RouterInfo('pages/ImagePage', '图片查看案例'),
  new RouterInfo('pages/ItemPage', '商品列表案例'),
  new RouterInfo('pages/StatePage', 'Jack和他的女友案例'),
  new RouterInfo('pages/PropPage', '任务列表案例'),
  new RouterInfo('pages/AnimationPage', '小鱼动画案例按钮版'),
  new RouterInfo('pages/AnimationPage2', '小鱼动画案例摇杆版'),
  new RouterInfo('pages/LifeCirclePage', '生命周期案例1'),
  new RouterInfo('pages/TestPage1', '生命周期案例2'),
  new RouterInfo('pages/DocumentListPage', 'UIAbility启动模式案例'),
// new RouterInfo('pages/ShopPage', '查询商铺案例'),
//new RouterInfo('pages/TaskManagePage', '任务列表持久化案例'),
]

@Entry
@Component
struct Index {
  @State message: string = '页面列表'
  @State showPanel: boolean = false
  @Provide fontSize: number = 16

  async aboutToAppear() {
    this.fontSize = await PreferencesUtil.getPreferenceValue('MyPreferences', 'IndexFontSize', 16) as number
  }

  build() {
    Column() {
      // 顶部标题
      this.Title()

      // 导航列表
      this.RouterList()

      // 字体修改面板
      if (this.showPanel) {
        IndexFontSizePanel()
          .transition({
            translate: { y: 115 }
          })
      }
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  Title() {
    Row() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .height(80)
      Image($r('app.media.ic_public_settings'))
        .width(30)
        .onClick(() => {
          animateTo({ duration: 500, curve: Curve.EaseOut }, () => this.showPanel = !this.showPanel)
        })
    }
    .justifyContent(FlexAlign.SpaceAround)
    .width('100%')
  }

  @Builder
  RouterList() {
    List({ space: 15 }) {
      ForEach(
        routers,
        (router, index) => {
          ListItem() {
            RouterItem({ r: router, i: index + 1 })
          }
        }
      )
    }
    .layoutWeight(1)
    .alignListItem(ListItemAlign.Center)
    .width('100%')
  }
}

//RouterItem

import router from '@ohos.router'
import RouterInfo from '../viewmodel/RouterInfo'

@Component
export default struct RouterItem{
  r: RouterInfo
  i: number
  @Consume fontSize: number

  build(){
    Row(){
      Text(this.i + '.')
        .fontSize(this.fontSize)
        .fontColor(Color.White)
      Blank()
      Text(this.r.title)
        .fontSize(this.fontSize)
        .fontColor(Color.White)
    }
    .width('90%')
    .padding(12)
    .backgroundColor('#38f')
    .borderRadius(20)
    .shadow({radius: 6, color: '#4F000000', offsetX: 2, offsetY: 4})
    .onClick(() => {
      // router跳转
      router.pushUrl(
        {
          url: this.r.url,
          params: {id: this.i}
        },
        router.RouterMode.Single,
        err => {
          if(err){
            console.log(`路由失败，errCode: ${err.code} errMsg:${err.message}`)
          }
        }
      )
    })
  }
}

//RouterInfo
export default class RouterInfo{
  // 页面路径
  url: string
  // 页面标题
  title: string

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