# harmonyXNavigation

**Repository Path**: StephenTom/harmony-xnavigation

## Basic Information

- **Project Name**: harmonyXNavigation
- **Description**: 分装鸿蒙 Navigation、NavDestination、NavPathStack 路由跳转工具类
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-26
- **Last Updated**: 2024-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# harmonyXNavigation

#### 介绍
    封装装鸿蒙 Navigation、NavDestination、NavPathStack 路由跳转工具类；实现动态路由。

#### 软件架构
    使用Navigation、NavDestination、NavPathStack

#### 安装教程
    ohpm install @hong/harmonyxnavigation

#### 配置
1. 自定义 hvigor 插件里面编写了一系列自动生成Navigation路由配置的route_map.json、builders等; 这个是某作者写的自定义 hvigor 的插件(发布在 https://www.npmjs.com/package/router-register-plugin?activeTab=versions)【使用路径：项目hvigor文件 -> hvigor-config.json5中进行配置："router-register-plugin":"1.0.4"】。装饰器名称、装饰器参数名称都必须与插件中的配置一致。

2. 对每个 Har/Hsp/Hap包进行设置：hvigorfile.ts文件中
```javascript
import { routerRegisterPlugin, PluginConfig } from "router-register-plugin";

const config: PluginConfig = {
    scanDir: "src/main/ets/components", // 需要注册路由界面的路径
    logEnabled: false,
    viewNodeInfo: false,
}

export default {
    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
    plugins:[routerRegisterPlugin(config)]      /* Custom plugin to extend the functionality of Hvigor. */
}

各包配置后以及注册路由界面后, 项目进行编译后, 
会自动生成_generated文件[builderRegister.ets];
module.json5中会自动引入[routerMap:$profile:route_map];
resources->base->profile会自动生成route_map.json文件.
```

#### 使用说明
1. 如果项目中存在 Hsp/Hap【feature】包。
```javascript
windowStage.loadContent('pages/Index', (err) => {
    // 初始化自定义导航路由(自定义动态路由)
    XNavigation.init(true)
})
```
2. 跳转
```javascript
XNavigation.push('Login')

Login为 Hsp 包中注册路由界面

自定义装饰器
@Route({
    name: "Login",
    description: "XLogin HSP Index",
    extra: "title: XLogin HSP Index",
})
```
3. 携带参数跳转
```javascript
XNavigation.push('MessagePage', { "title": 'to message', "desc": '来自于 home page', "age": 10 })
```
4. 返回上一个界面
```javascript
XNavigation.pop()
```
5. 携带参数返回上一个界面
```javascript
XNavigation.popWithResult({'desc': 'Login携带参数返回'})
```
6. 拦截 + 重定向到登录界面
```javascript
// 进行拦截
aboutToAppear(): void {
    XNavigation.addInterception('message', (info) => {
    let needLogin = info.needLogin
    console.log(`是否登录：${needLogin}`)
    console.log(`target page name：${info.routeParams?.name}`)

    if (needLogin) {
        // 重定向后，携带参数返回
        XNavigation.redirectPage('xLoginIndex', (info) => {
            console.log(info.result['desc'])
        })

        // 携带参数重定向
        XNavigation.redirectPageWithParam('xLoginIndex', {'desc': '携带参数过来'}, (info) => {
            console.log(info.result['desc'])
        })
     }
  })
}

aboutToDisappear(): void {
    XNavigation.removeInterception("message")
}
```
7. 替换当前界面
```javascript
XNavigation.replacePathByName('Message')
```
8. 清除站内路由界面，会返回到 Navigation 修饰的主页
```javascript
XNavigation.clear()
```

附带demo地址：https://gitee.com/StephenTom/harmony-xnavigation.git