1. router 路由方式存在传参问题,不能传递block 的内容,所以为了采用官方更推荐的路由栈作为路由的管理方式,尽早采用,否则后续改起来比较麻烦
(官方路由) [https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V14/arkts-routing-V14)]
1.1 router 方式:Router路由的页面是一个@Entry修饰的Component,每一个页面都需要在main_page.json中声明。
// main_page.json
{
"src": [
"pages/Index",
"pages/pageOne",
"pages/pageTwo"
]
}
^^^^^^^^^^^^^^^^^^^^ 打开新页面调用^^^^^^^^^^^^^^^
router.pushUrl({
url: 'pages/pageOne' // 目标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.');
})
^^^^^^^^^^^^^^^^^^^^ 关闭新页面调用^^^^^^^^^^^^^^^
router.back();
1.2 采用Navigation 的方式:
每个子页也需要配置到系统配置文件route_map.json中;实在buildFunction 对应的额全局方法
// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"}
// route_map.json
{
"routerMap": [
{
"name": "pageOne",
"pageSourceFile": "src/main/ets/pages/PageOne.ets",
"buildFunction": "PageOneBuilder",
"data": {
"description": "this is pageOne"
}
}
]
}
…………………… end
下面的方法通常放到对应的页面,例如这里是PageOne.ets
@builder
export function PageOneBuilder(title:string, param:any) {
}
******使用例子: 需要 Navigation 配合NavDestination 一起使用
@Entry
@Component
struct Index {
pathStack: NavPathStack = new NavPathStack()
build() {
// 设置NavPathStack并传入Navigation
Navigation(this.pathStack) {
Row(){
Text('点击跳转到onepage').onclick(()=>{
this.pathStack.pushPath({ name: 'pageOne' })
})
}.width('100%).height('100%')
// ...
}.width('100%').height('100%')
.title("Navigation")
.mode(NavigationMode.Stack)
}
}
@entry
@component
@struct OnePage {
DesNavigation() {
builder(){
Row()
}
}
}
ps: Router作为全局通用模块,可以在任意页面中调用,Navigation作为组件,子页面想要做路由需要拿到Navigation持有的页面栈对象NavPathStack,可以通过如下几种方式获取:
方式一:通过@Provide和@Consume传递给子页面(有耦合,不推荐)。
方式二:子页面NavDestination通过OnReady回调获取。
方式三: 通过全局的AppStorage接口设置获取。
方式四:通过自定义组件查询接口获取,参考queryNavigationInfo。
2. 生命周期差别:
- 2.1 Router页面生命周期为@Entry页面中的通用方法,主要有如下四个生命周期
// 页面创建后挂树的回调
aboutToAppear(): void {
}
// 页面销毁前下树的回调
aboutToDisappear(): void {
}
// 页面显示时的回调
onPageShow(): void {
}
// 页面隐藏时的回调
onPageHide(): void {
}
- 2.2 Navigation作为路由容器,其生命周期承载在NavDestination组件上,以组件事件的形式开放。
NavDestination() {
// ...
}
.onWillAppear(() => {
})
.onAppear(() => {
})
.onWillShow(() => {
})
.onShown(() => {
})
.onWillHide(() => {
})
.onHidden(() => {
})
.onWillDisappear(() => {
})
.onDisAppear(() => {
})