#鸿蒙通关秘籍#如何在鸿蒙ArkUI自定义弹窗中实现页面路由跳转？

在鸿蒙ArkUI中，当需要在自定义弹窗中进行页面路由跳转，可以通过在CustomDialog内部使用路由API实现：

1. 在自定义弹窗内处理路由跳转： javascript @CustomDialog struct CustomDialogExample { @Link textValue: string; controller?: CustomDialogController; cancel: () => void = () => { }; confirm: () => void = () => { };

   build() { Column({ space: 20 }) { if (this.textValue != '') { Text(第二个页面的内容为：${this.textValue}).fontSize(20); } else { Text('是否获取第二个页面的内容').fontSize(20); } Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('cancel') .onClick(() => { if (this.controller != undefined) { this.controller.close(); this.cancel(); } }).backgroundColor(0xffffff).fontColor(Color.Black); Button('confirm') .onClick(() => { if (this.controller != undefined && this.textValue != '') { this.controller.close(); } else if (this.controller != undefined) { this.getUIContext().getRouter().pushUrl({ url: 'pages/Index2' }); this.controller.close(); } }).backgroundColor(0xffffff).fontColor(Color.Red); }.margin({ bottom: 10 }); }.borderRadius(10).padding({ top: 20 }); } }

2. 在主页面组件内获取并处理传递的参数： javascript @Entry @Component struct CustomDialogUser { @State textValue: string = ''; dialogController: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExample({ cancel: () => { this.onCancel(); }, confirm: () => { this.onAccept(); }, textValue: $textValue, }) });

   onPageShow() { const params = this.getUIContext().getRouter().getParams() as Record<string, string>; if (params) { this.dialogController?.open(); this.textValue = params.info as string; } }

   build() { Column() { Button('click me') .onClick(() => { if (this.dialogController != null) { this.dialogController.open(); } }).backgroundColor(0x317aff); }.width('100%').margin({ top: 5 }); } }