当前位置：首页 > news >正文

鸿蒙Navigation路由导航-基本使用介绍

news 来源：原创 2025/6/7 7:21:16

1. Navigation介绍

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

官网文档地址：文档中心

本案例代码运行环境是API17

2. 案例代码

下面是基于官网示例代码修改而成的：

import { Gouwuche } from './Gouwuche';

@Entry
@Component
struct NavigationExample {private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];@Provide pageInfo: NavPathStack = new NavPathStack();@State message: string = '';
@BuilderNavigationTitle() {Column() {Text('Title').fontColor('#182431').fontSize(35).lineHeight(41).fontWeight(700)if (this.message) {Text('子页面返回数据=' + this.message).fontColor('#182431').fontSize(16).lineHeight(19).opacity(0.4).margin({ top: 2, bottom: 20 })}}.alignItems(HorizontalAlign.Start)}
@BuilderNavigationMenus() {Row({ space: 15 }) {Image($r('app.media.ic_public_add')).width(24).height(24).fillColor('#ic_public_add').onClick(() => {this.pageInfo.pushPathByName('Gouwuche', '18022223333', (info) => {//接收返回值this.message = info.result as string});})Image($r('app.media.ic_public_more')).width(24).height(24).fillColor('#ic_public_add')}.margin({ top: 10 })}
@BuilderPagesMap(name: string) {if (name == 'Gouwuche') {Gouwuche()}}
build() {Column() {Navigation(this.pageInfo) {TextInput({ placeholder: 'search...' }).width('100%').height(40).backgroundColor('#FFFFFF').margin({ top: 8 })
List({ space: 12, initialIndex: 0 }) {ForEach(this.arr, (item: number) => {ListItem() {Text('' + item).width('100%').height(72).backgroundColor('#FFFFFF').borderRadius(24).fontSize(16).fontWeight(500).textAlign(TextAlign.Center)}}, (item: number) => item.toString())}.layoutWeight(1).width('100%').alignListItem(ListItemAlign.Center).scrollBar(BarState.Off) //关闭滚动条.margin({ top: 12 })}.navDestination(this.PagesMap) //创建NavDestination组件。使用builder函数，基于name和param构造NavDestination组件.title(this.NavigationTitle) //设置页面标题.menus(this.NavigationMenus) //设置页面右上角菜单。不设置时不显示菜单项.titleMode(NavigationTitleMode.Full) // 设置页面标题栏显示模式.hideTitleBar(false, true) //设置是否隐藏标题栏.hideToolBar(false, true) //设置是否隐藏工具栏.mode(NavigationMode.Auto) //设置导航栏的显示模式，支持单栏（Stack）、分栏（Split）和自适应（Auto）}.width('100%').height('100%').backgroundColor('#F1F3F5')}
}

Gouwuche.ets文件代码如下：

@Component
export struct Gouwuche {@State message: string = '购物车';@Consume pageInfo: NavPathStack
aboutToAppear(): void {this.message = `${this.pageInfo.getParamByName('Gouwuche')}`}
build() {NavDestination() {Column() {Row() {Text(this.message).fontSize(30)Button('返回上一页').onClick(() => {this.pageInfo.pop('hello:鸿蒙你好！')})}}.width('100%').height('100%').backgroundColor('#ff77f8bd')}}
}

实验现象：

点击页面右上角的加号，会跳转到【Gouwuche】页面，并且显示上一个页面传来的参数：18022223333
点击【Gouwuche】页面中的【返回上一页】的按钮，页面跳转回第一个页面，并且将字符【hello:鸿蒙你好！】传递给第一个页面了

通过上面实验，我们可以学会以下知识点

页面之间如何通过Navigation组件进行跳转
页面跳转时，如何来回传递数据

3. 实战

3.1. 需求

定义登录和注册页面，然后登录页面点击注册按钮，跳转到注册页面
注册页面输入账号和密码后，点击注册按钮，页面立马跳转到登录页面
登录页面显示刚注册的账号和密码信息

3.2. 编码

登录页面代码如下：

import { RegisterPage } from './RegisterPage';

/*** 登录页面*/
@Entry
@Component
struct LoginPage {@Provide pageInfo: NavPathStack = new NavPathStack();@State registerInfo: string = '';
@BuilderPagesMap(name: string) {if (name == 'Register') {RegisterPage()}}
build() {Navigation(this.pageInfo) {Column({ space: 20 }) {
TextInput({ placeholder: '请输入登录账号' }).width('90%').backgroundColor('#ffdddddd')
TextInput({ placeholder: '请输入登录密码' }).width('90%').backgroundColor('#ffdddddd')
Row({ space: 20 }) {Button('登录')Button('注册').onClick(() => {this.pageInfo.pushPathByName('Register', '', (info) => {//接收返回值this.registerInfo = info.result as string});})}
//显示注册账号密码信息if (this.registerInfo) {Text(this.registerInfo).fontSize(16)}}}.title('登录页面').navDestination(this.PagesMap)
}
}

页面预览效果如下：

注册页面代码如下：

/** * 注册页面*/
@Component
export struct RegisterPage {@State username: string = ''; //登录账号@State password: string = ''; //登录密码@Consume pageInfo: NavPathStack
build() {NavDestination() {Column({ space: 15 }) {TextInput({ placeholder: '请输入登录账号' }).width('90%').backgroundColor('#ffdddddd').onChange((value: string) => {this.username = value;})
TextInput({ placeholder: '请输入登录密码' }).width('90%').backgroundColor('#ffdddddd').onChange((value: string) => {this.password = value;})
Row() {Button('注册').onClick(() => {this.pageInfo.pop('账号：' + this.username + '，密码：' + this.password)})}}.width('100%').height('100%')}.title('注册页面')}
}

页面效果如下图所示：