《鸿蒙next》关于路由 2025-03-13

1. router 路由方式存在传参问题,不能传递block 的内容,所以为了采用官方更推荐的路由栈作为路由的管理方式,尽早采用,否则后续改起来比较麻烦

(官方路由) [https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V14/arkts-routing-V14)]

1.1 router 方式:Router路由的页面是一个@Entry修饰的Component,每一个页面都需要在main_page.json中声明。


// main_page.json
{
  "src": [
    "pages/Index",
    "pages/pageOne",
    "pages/pageTwo"
  ]
}

^^^^^^^^^^^^^^^^^^^^ 打开新页面调用^^^^^^^^^^^^^^^
  router.pushUrl({
              url: 'pages/pageOne' // 目标url
            }, router.RouterMode.Standard, (err) => {
              if (err) {
                console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
                return;
              }
              console.info('Invoke pushUrl succeeded.');
            })

^^^^^^^^^^^^^^^^^^^^ 关闭新页面调用^^^^^^^^^^^^^^^
router.back();


1.2 采用Navigation 的方式:

每个子页也需要配置到系统配置文件route_map.json中;实在buildFunction 对应的额全局方法

// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"}
// route_map.json
{
  "routerMap": [
    {
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description": "this is pageOne"
      }
    }
  ]
}
…………………… end

下面的方法通常放到对应的页面,例如这里是PageOne.ets
@builder
export  function  PageOneBuilder(title:string, param:any) {
}

******使用例子: 需要 Navigation 配合NavDestination 一起使用
@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack()

  build() {
    // 设置NavPathStack并传入Navigation
    Navigation(this.pathStack) {
       Row(){
         Text('点击跳转到onepage').onclick(()=>{
        this.pathStack.pushPath({ name: 'pageOne' })
       })
      }.width('100%).height('100%')
      // ...
    }.width('100%').height('100%')
    .title("Navigation")
    .mode(NavigationMode.Stack)
  }
}

@entry
@component
@struct OnePage {
    DesNavigation() {
     builder(){
    Row()
     }
  }
}

ps: Router作为全局通用模块,可以在任意页面中调用,Navigation作为组件,子页面想要做路由需要拿到Navigation持有的页面栈对象NavPathStack,可以通过如下几种方式获取:

  • 方式一:通过@Provide和@Consume传递给子页面(有耦合,不推荐)。

  • 方式二:子页面NavDestination通过OnReady回调获取。

  • 方式三: 通过全局的AppStorage接口设置获取。

  • 方式四:通过自定义组件查询接口获取,参考queryNavigationInfo。

2. 生命周期差别:
  • 2.1 Router页面生命周期为@Entry页面中的通用方法,主要有如下四个生命周期
// 页面创建后挂树的回调
aboutToAppear(): void {
}
// 页面销毁前下树的回调  
aboutToDisappear(): void {
}
// 页面显示时的回调  
onPageShow(): void {
}
// 页面隐藏时的回调  
onPageHide(): void {
}
  • 2.2 Navigation作为路由容器,其生命周期承载在NavDestination组件上,以组件事件的形式开放。
NavDestination() {
      // ...
    }
    .onWillAppear(() => {
    })
    .onAppear(() => {
    })
    .onWillShow(() => {
    })
    .onShown(() => {
    })
    .onWillHide(() => {
    })
    .onHidden(() => {
    })
    .onWillDisappear(() => {
    })
    .onDisAppear(() => {
    })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容