说明
鸿蒙开发中，一个页面跳转到另一个页面，使用 Router 模块，与Vue、React框架有些类似
应用场景
【登录】页面 -> 【首页】页面 -> 【我的】页面
跳转模式
Router模块提供了两种跳转模式：
- router.pushUrl()
- router.replaceUrl()
router.pushUrl()
目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态
可以通过 返回键 或者调用 router.back() 方法返回到当前页
**应用场景：**通用
router.replaceUrl()
目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。
应用场景： 登录成功后，跳转到【首页】，使用该方式，点击后退，不会后退到【登录】页面
页面栈的最大容量
页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear() 方法清空历史页面栈，释放内存空间。
导入模块
在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。
import router from '@ohos.router';
- 1
router.pushUrl() 说明
跳转到应用内的指定页面。
api1
pushUrl(options: RouterOptions): Promise
- 1
参数：
- options：RouterOptions类型，必填项，跳转页面描述信息
RouterOptions
路由跳转选项，对象，有以下属性：
-
url：string类型，必填，表示目标页面的url，可以用以下两种格式：
-
页面绝对路径，由配置文件中pages列表提供，例如：
-
pages/index/index
-
pages/detail/detail
-
-
特殊值，如果url的值是"/"，则跳转到首页。
-
params：object类型，表示路由跳转时要同时传递到目标页面的数据，切换到其他页面时，当前接收的数据失效。跳转到目标页面后，使用
router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。
案例一
有一个主页（Home）和一个详情页（Detail），希望从主页点击一个商品，跳转到详情页。同时，需要保留主页在页面栈中，以便返回时恢复状态。这种场景下，可以使用pushUrl()方法，并且使用Standard实例模式（或者省略）。
// 在Home页面中
function onJumpClick(): void {
router.pushUrl({
url: 'pages/Detail' // 目标url
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('Invoke pushUrl succeeded.');
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
例子
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
api2
pushUrl(options: RouterOptions, callback: AsyncCallback): void
- 1
参数：
-
options：RouterOptions类型，必填，跳转页面描述信息。
-
callback：
AsyncCallback类型，必填，异常响应回调。
例子
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
router.replaceUrl() 说明
用应用内的某个页面替换当前页面，并销毁被替换的页面。不支持设置页面转场动效，如需设置，推荐使用Navigation组件。
api1
replaceUrl(options: RouterOptions): Promise
- 1
参数：
- options：RouterOptions类型，必填，跳转页面描述信息。
例子
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
api2
replaceUrl(options: RouterOptions, callback: AsyncCallback): void
- 1
参数：
-
options：RouterOptions类型，必填，跳转页面描述信息。
-
callback：
AsyncCallback类型，必填，异常响应回调。
例子
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
实例模式
分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。
-
Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。
-
Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。
评论记录：
回复评论：