当前位置:首页>鸿蒙APP>鸿蒙应用开发:页面跳转的2种方式

鸿蒙应用开发:页面跳转的2种方式

  • 2026-11-07 07:48:12
鸿蒙应用开发:页面跳转的2种方式

没有 @Entry 的页面是作为子组件被嵌入使用的,而不是通过路由跳转的。

两种页面跳转方式对比

方式一:路由跳转(需要 @Entry)

//  带 @Entry 的独立页面@Entry@Componentexport struct StudyEntryPage {  build() {    // 完整页面  }}// 通过路由跳转router.pushUrl({ url: 'pages/StudyEntryPage' });

方式二:组件嵌入(不需要 @Entry)

// 没有 @Entry,只是普通组件@Componentexport struct StudyPage {  @Prop initialMode: 'study' | 'review' = 'study';    build() {    // 组件内容  }}// 在父页面中直接使用@Componentexport struct ParentPage {  @State showStudy: boolean = false;    build() {    if (this.showStudy) {      // 直接作为组件嵌入,通过 @Prop 传参      StudyPage({         initialMode: 'study',        onFinishRound: () => { this.showStudy = false; }      })    }  }}

📋 总结对比

方式优点缺点需要 @Entry
组件嵌入传参简单、无需路由配置页面切换无动画、状态管理复杂❌ 不需要
路由跳转页面独立、有系统动画参数传递复杂、返回栈管理✅ 需要
混合方式灵活、可自定义过渡结构稍复杂顶层需要

页面没有 @Entry 却能使用,是因为它被嵌入在某个父组件中,通过 @Prop 传参控制,而不是通过路由跳转。

最新文章

随机文章