品牌网站设计提案/网络运营培训

【高心星出品】

Navigation实现页面路由

Navigation：路由导航的根视图容器，一般作为页面（@Entry）的根容器去使用，包括单页面（stack）、分栏（split）和自适应（auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

1. Title：标题栏，通过title属性对标题栏进行设置。通过menus配置菜单
2. NavContent：内容区域，默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
3. ToolBar：工具栏，通过toolbarConfiguration实现对工具栏的配置，如果不配置此属性，ToolBar不显示。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
4. NavDestination：作为子页面的根容器，用于显示Navigation的内容区。具备两种类型：STANDARD（标准类型，NavDestination的生命周期跟随NavPathStack栈中标准NavDestination变化而改变），DIALOG（默认透明。不影响其他NavDestination的生命周期）。
5. NavPathStack：Navigation路由栈，由于管理NavDestination组件的路由跳转。推荐使用NavPathStack配合navDestination属性进行页面路由。

完整的Navigation

要求入口页面必须是Navigation组件作为容器，子页面必须是NavDestinnation组件作为容器。由于我们将页面内容区的页面都添加了页面栈，所以在子页面拿到页面栈之后也可以实现子页面之间跳转。

入口页面

import { page1 } from '../viewmodel/page1'
import { page2 } from '../viewmodel/page2'@Entry
@Component
struct Index {// 菜单栏private menuitems:NavigationMenuItem[]=[{value:'菜单1',icon:'resources/base/media/startIcon.png',action:()=>{}},{value:'菜单2',icon:'resources/base/media/startIcon.png',action:()=>{}}]// 工具栏private toolbaritems:ToolbarItem[]=[{value:'工具1',icon:$r('app.media.startIcon'),action:()=>{}},{value:'工具2',icon:$r('app.media.startIcon'),action:()=>{}},{value:'工具3',icon:$r('app.media.startIcon'),action:()=>{}},{value:'工具4',icon:$r('app.media.startIcon'),action:()=>{}}]// 页面路由栈@Provide('pathstack') pathstack:NavPathStack=new NavPathStack()// 内容页@Builderpagemap(pagename:string){if(pagename=='page1'){page1()}else if(pagename=='page2'){page2()}}build() {Navigation(this.pathstack){Column({space:20}){Text('page1').fontSize(28).padding(10).border({width:2,color:Color.Red}).onClick(()=>{this.pathstack.pushPath({name:'page1'})}).width('100%')Text('page2').fontSize(28).padding(10).border({width:2,color:Color.Red}).onClick(()=>{this.pathstack.pushPath({name:'page2'})}).width('100%')}.width('100%').height('100%').backgroundColor(Color.Gray)}// 标题栏.title('主标题')// 菜单栏.menus(this.menuitems)// 工具栏.toolbarConfiguration(this.toolbaritems)// 内容页.navDestination(this.pagemap)}
}

子页面

/***作者：gxx*时间：2024/10/24 10:13*功能：**/
@Component
export struct page1 {
//   子页面拿到页面栈
@Consume('pathstack') pathstack:NavPathStackprivate menuitems: NavigationMenuItem[] = [{value: '菜单1',icon: 'resources/base/media/startIcon.png',action: () => {}},{value: '菜单2',icon: 'resources/base/media/startIcon.png',action: () => {}}]build() {NavDestination() {Column() {Text('page1').fontSize(28).fontWeight(FontWeight.Bolder)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}.title('页面标题').menus(this.menuitems)}
}

页面跳转

普通页面跳转

pushpath和replacepath都可以实现页面跳转，他们的区别就是在页面栈中覆盖页面还是替换页面的区别，replacepath无法实现pop回调，因为当前页在跳转的时候已经被销毁。

// 子页面之间也可以跳转
this.pathstack.replacePath({name:'page1',onPop:(info)=>{console.log('gxxt ',JSON.stringify(info))}})
this.pathstack.pushPath({name:'page1',onPop:(info)=>{console.log('gxxt ',JSON.stringify(info))}})

这里面的onpop是可选参数，如果设置了意味着在目标页可以通过调用页面栈的pop方法回到当前页，并且将返回值带过来，相当于带返回值的跳转。

.onBackPressed(()=>{this.pathstack.pop(result)return true})

此处result为目标页返回给当前页的返回值。

跳转携带数据

跳转的时候可以携带数据，通过param可以设置这些数据，并在目标页中获取。

.onClick(()=>{this.pathstack.pushPath({name:'page1',param:'来自首页的信息'})
})

这里携带了字符串类型的数据作为param。

.onReady((cxt)=>{let param= cxt.pathInfo.param as stringpromptAction.showToast({message:param})
})

可以在子页面的NavDestination的onready中获取携带过来的数据。

路由拦截

路由跳转中可以进行拦截处理，常用于路由重定向。比如主页面跳转到page1的时候，携带的数据为page2，重定向到page2.

.onClick(()=>{this.pathstack.pushPath({name:'page1',param:'page2'})
})

在首页跳转到page1页面。

aboutToAppear(): void {// 设置拦截器this.pathstack.setInterception({willShow:(from:NavDestinationContext|NavBar,to:NavDestinationContext|NavBar)=> {// 回到主页面的时候to是navbarif (typeof to == 'string') {return} else {let cxt = to as NavDestinationContext// 如果跳转到page1 但是携带数据是page2 就跳转到page2if (cxt.pathInfo.name == 'page1') {if (cxt.pathInfo.param == 'page2') {//移除page1this.pathstack.pop()this.pathstack.pushPath({ name: 'page2',param:'pagex' })}}}}})
}

在主页定义了页面栈的拦截器，只要跳转的目标是page1并且携带了数据page2，就将page1移除，重定向到page2，就相当于从主页直接跳转到了page2.

其他的

在主页中可以设置标题为mini并关闭后退按钮，从而保持界面统一化。

.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)

在子页中可以在生命周期方法onReady中拿到当前子页的上下文环境context，里面包含了页面路由的相关信息。

.onReady((cxt)=>{let param= cxt.pathInfo.param as stringpromptAction.showToast({message:param})
})

在子页中点击后退图标或者按后退键都是执行了NavDestination的onBackpress生命周期函数，我们可以重写该函数。

.onBackPressed(()=>{this.pathstack.pop('gxx')return true
})