HarmonyOS Navigation和router的使用场景

HarmonyOS  Navigation和router的使用场景。

HarmonyOS
2024-09-26 12:45:33
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

在HarmonyOS的ArkUI中,​​Navigation​​​ 和 ​​Router​​ 是用于页面导航和路由管理的重要工具。它们在实现应用的多页面结构和页面转换时发挥了关键作用。

### Navigation

​Navigation​​ 是一种基于声明式UI开发的导航管理方式,通常用于ArkUI中的TSX(TypeScript XML)编写的页面。在这种方式下,你可以通过绑定导航目标来实现页面跳转,并且可以很方便地传递参数、处理返回结果等。

#### 使用场景

  • 页面跳转:在一个页面中跳转到另一个页面。
  • 参数传递:在页面跳转时传递数据到目标页面。
  • 处理返回结果:从目标页面获取返回的数据或处理结果。

#### 示例代码 以下示例展示如何使用 ​​Navigation​​ 实现页面跳转与参数传递。

// HomePage.ets
@Entry
@Component
struct HomePage {
    build() {
        Column({ space: 20, alignItems: ItemAlign.Center }) {
            Button("Go to Details Page")
                .onClick(() => {
                    // 跳转到 DetailsPage,并传递参数
                    Navigation.navigateTo({
                        uri: 'pages/DetailsPage',
                        params: { userId: '12345' }
                    });
                })
        }.padding(20)
    }
}

// DetailsPage.ets
@Entry
@Component
struct DetailsPage {
    @State private userId: string;

    onInit(): void {
        this.userId = this.params.userId;
    }
    
    build() {
        Column({ space: 20, alignItems: ItemAlign.Center }) {
            Text(`User ID: ${this.userId}`)
                .fontSize(25)
        }.padding(20)
    }
}

### Router

​Router​​ 则是一种更底层的导航控制API,提供了更多的灵活性和功能,如返回页面历史堆栈、替换当前页面等。通常用于需要对页面栈进行更细粒度控制的场景。

#### 使用场景

  • 返回上一页:从当前页面返回到上一个页面。
  • 替换当前页面:用新页面替换当前页面,而不是将新页面推入页面堆栈。
  • 清空页面栈:在某些情况下,需要重置导航堆栈,如登录后进入主界面时。

#### 示例代码 以下示例展示如何使用 ​​Router​​ 实现页面跳转、返回和替换。

// HomePage.ets
@Entry
@Component
struct HomePage {
    build() {
        Column({ space: 20, alignItems: ItemAlign.Center }) {
            Button("Go to Details Page")
                .onClick(() => {
                    // 使用 Router 推入新页面
                    Router.push({
                        uri: 'pages/DetailsPage',
                        params: { userId: '12345' }
                    });
                })

            Button("Replace with Details Page")
                .onClick(() => {
                    // 使用 Router 替换当前页面
                    Router.replace({
                        uri: 'pages/DetailsPage',
                        params: { userId: '54321' }
                    });
                })
        }.padding(20)
    }
}

// DetailsPage.ets
@Entry
@Component
struct DetailsPage {
    @State private userId: string;

    onInit(): void {
        this.userId = this.params.userId;
    }

    build() {
        Column({ space: 20, alignItems: ItemAlign.Center }) {
            Text(`User ID: ${this.userId}`)
                .fontSize(25)
            
            Button("Go Back")
                .onClick(() => {
                    // 返回上一页
                    Router.back();
                })
        }.padding(20)
    }
}

### 总结

  • Navigation
  • 更适合声明式UI开发。
  • 简化了参数传递,适用于大部分常见的页面跳转场景。
  • Router
  • 提供了更底层的导航控制API。
  • 适用于需要对页面栈进行更细粒度控制的场景,例如页面替换、清空页面栈等。

根据具体需求选择合适的方法,可以更好地实现页面导航和用户体验。

分享
微博
QQ
微信
回复
2024-09-26 18:15:30
superinsect

当前HarmonyOS支持两套路由机制(Navigation和Router),Navigation作为后续长期演进及推荐的路由选择方案,其与Router比较的优势如下:

易用性层面:

Navigation天然具备标题、内容、回退按钮的功能联动,开发者可以直接使用此能力。Router若要实现此能力,需要自行定义。

Navigation的页面是由组件构成,易于实现共享元素的转场。

功能层面:

Navigation天然支持一多,Router不支持。

Navigation没有路由数量限制,Router限制32个。

Navigation可以获取到路由栈NavPathStack,并对路由栈进行操作。

Navigation可以嵌套在模态对话框中,也就是说可以模态框中定义路由,Router不支持。

Navigation的组件全量由开发者自行控制,开发者可以自定义复杂的动效和属性的设置(背景、模糊等),Router的page对象不对外暴露,开发者无法对page进行处理。

性能层面:

Navigation传递参数性能更优,Navigation通过引用传递,Router通过深拷贝完成。

Navigation可以配合动态加载,实现组件动态加载,Router页面使用@Entry进行修饰,当前模块加载时会生成全量页面。

应用架构可以参考链接:https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-app-architecture-overview-V5推荐使用Navigation,navigation后续是会兼容router所有的能力而且比router的功能更强大,未来navigation是主流。

已于2024-9-26 18:10:26修改
分享
微博
QQ
微信
回复
2024-09-26 18:10:01
相关问题
HARHSP使用场景区分
285浏览 • 1回复 待解决
关于routerNavigation要选择哪个使用
586浏览 • 2回复 待解决
关于emitter、eventHub使用场景
2561浏览 • 1回复 待解决
napi 基本使用场景示例
1445浏览 • 1回复 待解决
navigationrouter区别是什么?
924浏览 • 1回复 待解决
ArkGraphics 2D都有哪些使用场景
507浏览 • 1回复 待解决
请问ArkTS中this使用场景是什么?
1946浏览 • 1回复 待解决
TiDB优势?有哪些应用场景
3670浏览 • 1回复 待解决
基于mysql悲观锁用场景
2581浏览 • 1回复 待解决
应用启动框架AppStartup应用场景分析
459浏览 • 1回复 待解决
JSVM-API用场景有哪些?
367浏览 • 1回复 待解决