页面路由指在应用程序中实现不同页面之间的跳转和数据传递
1、页面跳转
跳转模式
- router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用[router.back()]方法返回到当前页。
- router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。
说明:页面栈的最大容量为32个页面。如果超过这个限制，可以调用[router.clear()]方法清空历史页面栈，释放内存空间。
页面实例模式
1.Standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶。默认就是这种模式
2.Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同Url页面会被移动到栈顶并重新并重新加载
如：有一个设置页（Setting）和一个主题切换页（Theme），希望从设置页点击主题选项，跳转到主题切换页。同时，需要保证每次只有一个主题切换页存在于页面栈中，在返回时直接回到设置页，用single。
导入Router模块
import router from ‘@ohos.router’;
示例1： 由一个页面跳转到另一个页面
新建aaa.etc bbb.etc
配置路由文件resource/base/profile/main_pages.js：
{
"src": [
"pages/Index",
"pages/aaa",
"pages/bbb"
]
}
aaa.etc源代码
import router from '@ohos.router';
@Entry
@Component
struct RouterTest012{
build() {
Column() {
Button() {
Text('我是主页，点击跳转内页')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.backgroundColor('red')
.onClick(() => {
Jumpfun()
})
}
}
}
function Jumpfun(): void {
//router.RouterMode.Standard 可以省略
router.pushUrl({
url: 'pages/bbb'
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`错误代码： ${err.code},信息： ${err.message}`);
return;
}
console.info('成功');
});
}
bbb.etc源代码
@Entry
@Component
struct RouterTest022 {
build() {
Column() {
Text("我是内页")
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
}
}
示例2：**从当前页面跳转到另一个页面，同时，销毁当前页面
function Jumpfun(): void {
router.replaceUrl({
url: ‘pages/bbb’
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(错误代码： ${err.code},信息： ${err.message});
return;
}
console.info(‘成功’);
});
}
2、路由参数
如果需要在跳转时传递一些数据给目标页，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数
传递参数
class DataModelInfo {
age: number;
}
class DataModel {
id: number;
info: DataModelInfo;
}
function onJumpClick(): void {
let paramsInfo: DataModel = { id: 123, info: { age: 20 } };
router.pushUrl({
url: ‘pages/Detail’, // 目标url
params: paramsInfo // 添加params属性，传递自定义参数
}, (err) => {。。。})
}
接受参数
在Detail页面，可加到页面生命周期中：
onPageShow() {
const params = router.getParams(); // 获取传递过来的参数对象
const id = params[‘id’]; // 获取id属性的值
const age = params[‘info’].age; // 获取age属性的值
}
3、页面返回
当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能
1、返回到上一个页面
router.back();
上一个页面必须存在于页面栈中才能够返回，否则该方法将无效。
2、返回到指定页面。
router.back({ url: ‘pages/Home’});
3、返回到指定页面，并传递自定义参数信息。
router.back({ url: ‘pages/Home’, params: { info: ‘你好’ }});
参数调用：
onPageShow() {
const params = router.getParams(); // 获取传递过来的参数对象
const info = params[‘info’]; // 获取info属性的值
}
4、路由提示框
系统默认询问框
Router模块提供的两个方法：[router.showAlertBeforeBackPage()和[router.back()]来实现这个功能
点击“我的内页”，弹出提示框
参考代码：
import router from '@ohos.router';
@Entry
@Component
struct RouterTest022 {
build() {
Column() {
Text("我是内页")
.fontSize(30)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
try {
router.showAlertBeforeBackPage({
message: '您确定要返回吗？' // 设置询问框的内容
});
} catch (err) {
console.error(`错误 ${err.code}, message is ${err.message}`);
}
// 调用router.back()方法，返回上一个页面
router.back();
})
}
}
}
router.showAlertBeforeBackPage()方法接收一个对象作为参数，该对象包含以下属性：
**message：**string类型，表示询问框的内容。
如果调用成功，则会在目标界面开启页面返回询问框；如果调用失败，则会抛出异常，并通过err.code和err.message获取错误码和错误信息。
当用户点击“返回”按钮时，会弹出确认对话框，询问用户是否确认返回。选择“取消”将停留在当前页目标页；选择“确认”将触发router.back()方法，并根据参数决定如何执行跳转。
自定义询问框
自定义询问框的方式，可以使用弹窗或者[自定义弹窗]实现，提高应用的用户体验度。
调用弹窗的[promptAction.showDialog()]方法
import promptAction from ‘@ohos.promptAction’
参考代码：
import router from '@ohos.router';
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct RouterTest022 {
build() {
Column() {
Text("我是内页")
.fontSize(30)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
// 弹出自定义的询问框
promptAction.showDialog({
message: '您确定要返回吗？',
buttons: [
{
text: '取消吧',
color: '#00FF00'
},
{
text: '确认吧',
color: '#FF0000'
}
]
}).then((result) => {
if (result.index === 0) {
console.info('用户点击了“取消”按钮');
} else if (result.index === 1) {
console.info('用户点击了“确认”按钮');
// 调用router.back()方法，返回上一个页面
router.back();
}
}).catch((err) => {
console.error(`错误： ${err.code}, message is ${err.message}`);
})
})
}
}
}
