前言:
在鸿蒙中页面与页面之间的跳转,我们可以使用routerAPI来进行页面级跳转,但实际开发中我们并不需要那么多页面来进行编写,组件的编写更为简单,怎么样才能进行组件与组件之间的跳转呢?我们就要使用到Navgiation组件
使用方法:
Navigation组件可以进行页面与页面之间的跳转,也能实现组件与组件之间的跳转,所以更受欢迎:
第一步:
1.创建Navgiation组件,
其身上有一个属性,单栏,双栏属性,根据实际开发也要进行关闭或者打开
Navgiation(){}
.mode(NavigationMode.stack)//单栏模式
2.创建路由站对象:
navPathStack= new NavPathStack()
//如果项目中需要多次使用跳转的话可以使用@Provide装饰器来进行装饰
//可以传入其他组件来使用
3.再将路由站对象传入Navgiation组件当中去
Navgiation(this.navPathStack){}
第二步:使用
@Builder来包裹NavDestination
@Builder
function xxBuilder(){
NavDestination(){
//自定义组件的名字
}
.hideTitleBar(true)//关闭自带的返回组件
}
第三步:路由表等配置:
在需要使用的模块:ets/resources/profile来创建一个router_map.json5(ps:文件后缀不能出错),并进行路由表配置
"routerMap": [
{
"name": "SearchView", // 跳转时的name必须对应
"pageSourceFile": "src/main/ets/views/SearchView.ets", // builder对应的文件路径
"buildFunction": "SearchViewBuilder", // 跳转到哪个builder
"data": {
"description": "this is SearchView"
}
}
]
}
再在模块下的medio.json5里面配置
"routerMap": "$profile:route_map"
第四步:
在需要跳转的页面进行跳转:
this.navPathStack.pagePath({name:'目标页面'},params://如果需要携带参数就传入参数)
完整示例:
//父组件
@Component
struct Index {
buidl(){
@Provide navPathStack = new NavPathStack() //父页面声名路由实例对象
//用Navigation组件包裹所有结构
Navigation(){
Column(){
Text('我是父组件点我跳转到子组件')
.onClick(()=>{
this.navPathStack.pagePath({name:'xxview'})
})
}
.width('100%')
.height('100%')
}
}
}
//必须使用Builder组件进行包裹
@Builder
function xxviewBuilder(){
NavDestination(){
xxview()
}
.hideTitleBar(true)
}
//子组件
@Component
export struct xxview {
build(){
Column(){
Text('我是子组件')
}
}
}
