@satis/oh-router

简介

@satis/oh-router 与 hvigor插件 @satis-sun/modularity-plugin 配合使用，无需手动配置系统路由表，
使用注解的方式即可完成系统路由表的配置

1. 下载安装

ohpm install @satis/oh-router

推荐使用 @satis-sun/modularity-plugin 插件，该插件会自动配置模块依赖 @satis/oh-router、@satis/common_router
无需手动安装

• 配置 工程目录下的 hvigor/hvigor-config.json5

  {
    "modelVersion": "5.0.0",
    "dependencies": {
      "@satis-sun/modularity-plugin": "^1.0.4"
    },
    ...
  }
  

• 配置工程目录下 hvigorfile.ts

  import { appTasks } from '@ohos/hvigor-ohos-plugin';
  import { ModularityPlugin,ModularityConfig } from '@satis-sun/modularity-plugin'
  
  export const config:ModularityConfig = {
      scanModules:[
        {
          name:"module1",
        },
      ]
  }
  
  export default {
      system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
      plugins:[ModularityPlugin(config)]         /* Custom plugin to extend the functionality of Hvigor. */
  }
  
  

  其中 ModularityConfig 参数如下

  scanModules	ModuleConfig[]	需要自动配置路由的模块（不设置默认配置全部模块 不建议）
  ModuleConfig:name	模块名称（文件夹名）	必填
  ModuleConfig:scanPackages	指定扫描包内的特定目录结合	如["pages"] 目录（非必填）
  ModuleConfig:ignorePackages	指定忽略扫描的目录集合	如["viewModle"] 目录（非必填）

2. 页面上添加 @Router注解，

• 路由目标页面

  import { Router } from '@satis/oh-router'
  
  @Router({
      name:"/module1/second"
  })
  @Component
  export struct Second{
    build() {
      NavDestination(){
        Text("second")
      }.title("module1 second")
    }
  }
  

  其中 Router(routerConfig:RouterConfig) RouterConfig参数如下

  name:string|undefined
  interceptionTag?:string
  interceptionTip?:string

  name	string	路由名称规定需要以"/" 开头，（推荐使用 "/模块/业务/功能" 这种命名方式）
  interceptionTag	?string	路由拦截标识，自定义标识
  interceptionTip	?string	路由拦截提示语言

3. 编译

• @satis-sun/modularity-plugin 会自动创建common_router模块，用来存储 路由name的 枚举类

• 自动配置依赖

   "dependencies": {
      "@satis/oh-router": "^1.0.0",
      "@satis/common-router": "file:../common_router"
    },
  

• scanModules 所有模块下的 module.json5自动添加配置

   "routerMap": "$profile:router_map"
  

• 自动创建 src/main/resources/bash/profile/router_map.json

  {
    "routerMap": [
      {
        "name": "/module1/second",
        "pageSourceFile": "src/main/ets/generate/module1_second.ets",
        "buildFunction": "module1_secondBuilder"
      }
    ]
  }
  

• 自动生成 Builder src/main/ets/generate/module1_second.ets

  import { Second } from 'ets/pages/Second'
  @Builder
  function module1_secondBuilder() {
    Second()
  }
  

• 在common_router 模块自动生成路由枚举常量声明

  export enum RouterEnum{
   /**
   * 
   *  路由地址: /module2/main
   *  pageSourceFile: src/main/ets/_generate/module1_second.ets
   *  buildFunction: module1_secondBuilder
   *  拦截标识 interceptionTag: 
   *  拦截提示 interceptionTip:
   */
   MODULE1_SECOND="/module1/second",
  }
  
  

• 自动替换 路由名称为 枚举常量

  import { Router } from '@satis/oh-router'
  import { RouterEnum } from'@satis/common-router';
  
  @Router({
      name:RouterEnum.MODULE1_SECOND
  })
  @Component
  export struct Second{
    build() {
      NavDestination(){
        Text("second")
      }.title("module1 second")
    }
  }
  

4. 路由初始化

在应用如空 onWindowStageCreate 中初始化

 onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    const  pageStack = new NavPathStack()
    
    OHRouter.init({
      pageStack:pageStack,
      needInterceptMap:interceptMap()
    })
    
    // 添加拦截器
    OHRouter.setInterceptForTag("login",{
      onIntercept(next:()=>void,tip?:string){
         let login = false
         //TODO goto login 
        //登陆完成后 继续之前的跳转
        if(login){
          next()
        }else{
          console.log(tip)
        }
      }
    })
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

5. 通过OhRouter即可跳转（支持跨模块跳转）

@Entry
@Component
struct  Index {
  @State message: string = 'Hello World';
  build() {
     Navigation(OhRouter.pageStack){
     }.hideNavBar(true)
     .onAppear(()=>{
        OhRouter.pushPathByName(RouterEnum.MODULE2_SECOND,null,true)
     })
    .width('100%')
    .height('100%')
    .titleMode(NavigationTitleMode.Mini)
  }
}