深入解析鸿蒙系统的页面路由（Router）机制，2024年最新美团ios面试Standard：标准实例模式，也是默认情况

Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。
Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。

2. 页面路由的工作原理

鸿蒙系统的页面路由基于一种轻量级的栈式管理结构。每个页面都有一个唯一的标识符，当页面切换时，页面路由根据标识符入栈或出栈，实现页面的切换和管理。

3. 具体实现

3.1. 引入Router模块

import router from '@ohos.router';

3.2. 代码示例

LoginPage.ets

import router from '@ohos.router'; import promptAction from '@ohos.promptAction';

@Entry @Component struct LoginPage { @State message: string = 'Login Page'

build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold)

Button('跳转1') .width(100) .margin({ top: 10 }) .onClick(() => { router.pushUrl({ url: 'pages/HomePage', params: { msg: 'hello world，我是上一个页面传递过来的' } }, router.RouterMode.Standard, (err) => { if (err) { promptAction.showToast({ message: 跳转失败：code is ${err.code}, message is ${err.message} }) return; } else { promptAction.showToast({ message: 跳转成功 }) }

} )

})

Button('跳转2') .width(100) .margin({ top: 10 }) .onClick(() => { router.pushUrl({ url: 'pages/HomePage' }, router.RouterMode.Single, (err) => { if (err) { promptAction.showToast({ message: 跳转失败：code is ${err.code}, message is ${err.message} }) return; } else { promptAction.showToast({ message: 跳转成功 }) }

} )

})

Button('跳转3') .width(100) .margin({ top: 10 }) .onClick(() => { router.replaceUrl({ url: 'pages/HomePage' }, router.RouterMode.Single, (err) => { if (err) { promptAction.showToast({ message: 跳转失败：code is ${err.code}, message is ${err.message} }) return; } else { promptAction.showToast({ message: 跳转成功 }) }

} ) })

} .width('100%') } .height('100%') } }

HomePage.ets

import router from '@ohos.router'; import promptAction from '@ohos.promptAction';

@Entry @Component struct HomePage { @State message: string = 'HomePage' @State msg: string = '';

onPageShow() { // 获取传递过来的参数对象 const params = router.getParams(); if (params != null && this.msg != null) { // 获取info属性的值 this.msg = params['msg']; } else { this.msg = '没有参数传递过来' } }

build() { Row() { Column() {

Text(this.msg) .fontSize(20)

Button('返回上一页').onClick(() => { router.back() })

Button('返回指定页面') .margin({ top: 10 }) .onClick(() => { router.back({ url: 'pages/Index' }) })

Button('页面返回询问框') .margin({ top: 10 }) .onClick(() => {

// 调用router.showAlertBeforeBackPage()方法，设置返回询问框的信息 try { router.showAlertBeforeBackPage({ message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容 }); } catch (err) { console.error(Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}); } router.back() })

Button('页面返回询问框自定义') .margin({ top: 10 }) .onClick(() => {

// 弹出自定义的询问框 promptAction.showDialog({ message: '您还没有完成支付，确定要返回吗？', buttons: [ { text: '取消', color: '#FF0000' }, { text: '确认', color: '#0099FF' } ] }).then((result) => { if (result.index === 0) { // 用户点击了“取消”按钮 console.info('User canceled the operation.'); } else if (result.index === 1) { // 用户点击了“确认”按钮 console.info('User confirmed the operation.'); // 调用router.back()方法，返回上一个页面 router.back(); } }).catch((err) => { console.error(Invoke showDialog failed, code is ${err.code}, message is ${err.message}); }) })

} .width('100%') } .height('100%') } }

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术，这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05