鸿蒙应用路由Navigation介绍与项目应用

// 根容器入口页面
@Entry
@Component
struct App {
  @Provide('NavPathStack') entryHapARouter: NavPathStack = new NavPathStack()

  // 构建函数,每次进行路由操作会调用
  @Builder
  PagesMap(name: string) {
    if (name == 'FirstPage') {
      FirstPage()
    }
  }

  build() {
    Navigation(this.entryHapARouter) {
    }
    .mode(NavigationMode.Stack)
    .onAppear(() => {
      // 页面挂载后进行页面跳转
      this.entryHapARouter.pushPath(
        { 
          name: "FirstPage", 
          param: new Object({
                  paramA: 'A',
                  paramB: true
                })
        })
    })
    // 隐藏标题栏、菜单栏、工具栏
    .hideNavBar(true)
    .navDestination(this.PagesMap)
  }
}

// NavDestination 子页面组件
@Component
export struct FirstPage {
  build() {
     NavDestination() {
       Column() {
           Text("FirstPage NavDestination")
             .fontSize(20)
         }
         .justifyContent(FlexAlign.Center)
         .height('100%')
         .width('100%')
     }
     .backgroundColor('rgba(0,0,0,0.5)')
     .hideTitleBar(true)
   }
}

@Builder
export function loginPageBuilder() {
  LoginPage()
}

@Component
export struct LoginPage {
  build() {
     NavDestination() {
       Column() {
           Text("LoginPage")
             .fontSize(20)
         }
         .justifyContent(FlexAlign.Center)
         .height('100%')
         .width('100%')
     }
     .backgroundColor('rgba(0,0,0,0.5)')
     .hideTitleBar(true)
   }
}

{
  ...
  "module" : {
    "routerMap": "$profile:route_map"
  }
}

{
    "routerMap": [
      {
        "name": "LoginPage",
        "pageSourceFile": "src/main/ets/pages/LoginPage.ets",
        "buildFunction": "loginPageBuilder"
      }
    ]
}

Change the 'routerMap' object names listed below under routerMap in the respective router configuration files. Make sure the names are unique across the current module and the modules on which it depends.

export class RouterModule {
  // 手动实现路由表, WrappedBuilder支持@Builder描述的组件以参数的形式进行封装存储
  static builderMap: Map<string, WrappedBuilder<[object]>> = new Map<string, WrappedBuilder<[object]>>();

  // 初始化路由栈，需要关联Navigation组件
  static navPathStack: NavPathStack = new NavPathStack();

  // 注册页面组件到路由表，builderName是路由名字，builder参数是包裹了页面组件的WrappedBuilder对象
  public static registerBuilder(builderName: string, builder: WrappedBuilder<[object]>): void {
    RouterModule.builderMap.set(builderName, builder);
  }

  // 根据名字获取路由表中指定的页面组件
  public static getBuilder(builderName: string): WrappedBuilder<[object]> {
    const builder = RouterModule.builderMap.get(builderName);
    if (!builder) {
      console.info('not found builder ' + builderName);
    }
    return builder as WrappedBuilder<[object]>;
  }

  // 路由方法,通过获取页面栈跳转到指定页面
  // 通过传入RouterModule跳转到指定页面组件，RouterModule包含跳转需要的信息
  public static async push(builderName: string): Promise<void> {
    // 从builderName中获取包名harName
    const harName = builderName.split('_')[0];
    // 动态导包，包导入成功后调用包index页面的harInit方法，动态导入需要跳转的文件。该文件首次加载时将完成页面注册到RouterModule模块的builderMap中。
    await import(harName).then((ns: ESObject): Promise<void> => ns.harInit(builderName));
    // 通过路由名跳转，并携带路由页面所需信息param
    RouterModule.navPathStack.pushPath({ name: builderName });
  }
}