HarmonyOS Navigation和router的使用场景

HarmonyOS Navigation和router的使用场景。

HarmonyOS

zxjiu

2024-09-26 12:45:33

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在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。
适用于需要对页面栈进行更细粒度控制的场景，例如页面替换、清空页面栈等。

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

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修改

2024-09-26 18:10:01

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Navigation和router的使用场景

订阅鸿蒙技术特刊，精选内容抢先看