HarmonyOS开发：AppRouter通过Navigation+hvigor插件实现的动态路由方案

简介

AppRouter通过Navigation+hvigor插件实现的动态路由方案，便于项目各模块之间的页面跳转

下载安装

ohpm install @zhongrui/app_router

该路由方案实现的效果：

entry模块依赖A模块(Har)、B模块(Har)、C模块(Hsp)，ABC三个模块互相不依赖，可实现这4个模块之间互相进行页面跳转(达到解耦的效果)

比如：

1. entry模块页面跳转至->entry模块、A模块、B模块、C模块页面

   A模块页面跳转至->entry模块、A模块、B模块、C模块页面

   . . .

2. 提供拦截器，在跳转某个页面时，可以根据业务需求在页面跳转前拦截(如果跳转某个不存在的组件，拦截器不会触发，避免处理无效逻辑)

3. 根据注解参数可配置跳转目标页面前是否需要验证登录状态，在未登录的情况下，跳转目标页面前会执行登录操作

4. 根据注解参数可配置在步骤3执行登录操作之后，是否继续执行登录前的页面跳转动作

5. App启动时可以配置不用加载所有模块的路由表数据（相对启动时加载所有路由表数据，不加载可以避免增加启动耗时问题)，在页面跳转时会动态加载，然后加入缓存中，下次跳转直接读缓存

首先展示跳转逻辑与目标页面定义方式

1. 这是封装之后具体使用时Navigation根视图和页面跳转代码

@Entry
@Component
struct Index {
  @Builder
  getBuilder(path: string) {
    //此处写法固定，不会随着组件数量增加而增加额外逻辑
    AppRouter.getBuilderByPath(path)?.builder(path as Object)
  }
  build() {
    //Navigation这里记得传入AppRouter.getRootStack()，否则跳转不生效
    Navigation(AppRouter.getRootStack()) {
         
      Button("跳转目标页面").onClick(() => {
         
        //1：通过路由跳转目标页面
        AppRouter.push("entry/target")
         
      })
         
    }.hideTitleBar(true)
    .navDestination(this.getBuilder)
  }
}

1. 定义目标页面的代码(不用@Entry修饰，不用在main_pages.json文件里配置组件路径)

重点注意：1：组件需要export 2:组件名需要和文件名保持一致

import { RouterPath } from '@zhongrui/app_router/Index';
//此处path只能用字面量，不能用变量或者外部类定义的常量
@RouterPath({ path: "entry/target"})
@Component
export struct Target {
  build() {
    NavDestination() {
      Text("目标页面")
    }.hideTitleBar(true)
    .onAppear(()=>{
      //组件挂载时触发
    })
    .onDisAppear(()=>{
      //组件卸载时触发
    })
    .onShown(()=>{
      //页面显示时触发,相当于@Entry修饰的组件onPageShow()
    })
    .onHidden(()=>{
      //页面隐藏时触发,相当于@Entry修饰的组件onPageHide()
    })
    .onBackPressed(()=>{
      //如果返回true,则会拦截返回键
      return false
    })
  }
}

配置教程

如果不想看详细说明，只想知道项目使用时的简单配置->简单配置

1. 依赖app_router库

在每个模块的oh-package.json5配置

{  
   "dependencies": {
   //配置完记得点击右上角的Install Now
   "@zhongrui/app_router": "^1.0.4"
  }
}

2. 打开entry类型模块内的build-profile.json5文件

在节点buildOption->arkOptions->runtimeOnly->p