Mastering Page Data Transfer in HarmonyOS NEXT: Navigation vs Router

HarmonyOS NEXT offers multiple ways to transfer data between pages. The two most common approaches are the Navigation component, which uses NavPathInfo, and the router object, which works with URL‑based navigation.

1. Passing Parameters with Navigation

In HarmonyOS NEXT, create a NavPathInfo object on the source page, push it onto the page stack, and retrieve it on the target page.

Step 1: Build a NavPathInfo instance with the destination URI and the parameters to pass.

let loginParam: LoginParam = new LoginParam();
let pathInfo: NavPathInfo = new NavPathInfo('loginPage', loginParam, (popInfo: PopInfo) => {
  let loginParam: LoginParam = popInfo.info.param as LoginParam;
  // handle returned data
});
this.pageStack.pushDestination(pathInfo, true);

Step 2: On the target page, obtain the parameters via NavPathStack.getParamByIndex(0).

@Component
export struct loginPageView {
  @Consume('pageInfo') pageStack: NavPathStack;
  aboutToAppear(): void {
    this.loginParam = this.pageStack.getParamByIndex(0) as LoginParam;
  }
  // use loginParam for further logic
}

Step 3: Return data to the source page using NavPathStack.pop and its result parameter.

@Component
export struct loginPageView {
  @Consume('pageInfo') pageStack: NavPathStack;
  private loginParam!: LoginParam;
  ...
  build() {
    NavDestination(){
      ...
      Button('login').onClick(ent => {
        // return object to source page
        this.pageStack.pop(this.loginParam, true)
      })
    }
  }
}

Example Scenario: A simple app with HomePage and DetailPage. Clicking an item on HomePage navigates to DetailPage with the item's ID.

HomePage.ets

import { Column, Text, Navigation, Button } from '@ohos.arkui';
import { NavPathInfo } from '@ohos.application';

@Component
struct HomePage {
  private items: Array<{id: number; name: string}> = [
    {id: 1, name: 'Liu Bei'},
    {id: 2, name: 'Guan Yu'},
    {id: 3, name: 'Zhang Fei'}
  ];

  build() {
    Column() {
      this.items.map(item => {
        return Column() {
          Button(item.name).onClick(() => {
            this.navigateToDetail(item.id);
          });
        };
      });
    }
  }

  private navigateToDetail(id: number): void {
    const navInfo = new NavPathInfo({
      uri: 'pages/detail/DetailPage',
      params: { id },
    });
    Navigation.push(navInfo);
  }
}

DetailPage.ets

import { Column, Text } from '@ohos.arkui';
import { Navigation } from '@ohos.application';

@Component
struct DetailPage {
  @State private id: number = 0;

  aboutToAppear() {
    this.id = Navigation.getParams().id;
  }

  build() {
    Column() {
      Text(`Detail Page for ID: ${this.id}`);
    }
  }
}

2. Passing Parameters with router

The router object enables URL‑based navigation and parameter passing.

Source Page:

import { router } from '@kit.ArkUI';
// Prepare parameters
let paramsInfo: DataModel = {
  id: 123456,
  info: { age: 18 }
};
// Push URL with parameters
router.pushUrl({
  url: 'pages/routertest/Page2',
  params: paramsInfo
}, (err) => {
  if (err) {
    console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('Invoke pushUrl succeeded.');
});

Target Page:

import { router } from '@kit.ArkUI';
import { DataModel } from './DataModels';

@Entry
@Component
struct Page2 {
  @State receivedParams: DataModel = {} as DataModel;

  aboutToAppear() {
    this.receivedParams = router.getParams() as DataModel;
    console.info('Received params:', this.receivedParams);
  }

  build() {
    Column() {
      Text(`Received ID: ${this.receivedParams.id}`);
      Text(`Received Age: ${this.receivedParams.info.age}`);
    }
  }
}

Business Scenario: A product list page passes a product ID to a product detail page.

ProductListPage.ets

import { Column, Text, router } from '@ohos.arkui';

@Component
struct ProductListPage {
  private products: Array<{id: number; name: string}> = [
    {id: 1, name: 'Apple'},
    {id: 2, name: 'Passion Fruit'},
    {id: 3, name: 'Banana'}
  ];

  build() {
    Column() {
      this.products.map(product => {
        return Column() {
          Text(product.name)
            .width('100%')
            .height(50)
            .onClick(() => {
              this.navigateToDetail(product.id);
            });
        };
      });
    }
  }

  private navigateToDetail(id: number): void {
    router.push({
      url: 'pages/productDetail/ProductDetailPage',
      params: { id }
    });
  }
}

ProductDetailPage.ets

import { Column, Text, router } from '@ohos.arkui';

@Component
struct ProductDetailPage {
  @State private id: number = 0;

  aboutToAppear() {
    this.id = router.getParams().id;
  }

  build() {
    Column() {
      Text(`Product Detail for ID: ${this.id}`);
    }
  }
}

Both Navigation and router are effective for data transfer in HarmonyOS NEXT. Use Navigation when you need component‑based navigation and want to pass complex objects; choose router for simple URL‑driven page jumps.