《鸿蒙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(() => {
    })