鸿蒙UI（ArkUI-方舟UI框架）- 设置组件导航和页面路由

返回主章节 → 鸿蒙UI（ArkUI-方舟UI框架）
设置组件导航和页面路由

概述

组件导航（Navigation）和页面路由（@ohos.router）均支持应用内的页面跳转，但组件导航支持在组件内部举行跳转，使用更灵活。组件导航具备更强的一次开发多端部署本领，可以举行更加灵活的页面栈操作，同时支持更丰富的动效和生命周期。因此，保举使用组件导航（Navigation）来实现页面跳转以及组件内的跳转，以获得更佳的使用体验。
组件导航（Navigation）（保举）

组件导航（Navigation）重要用于实现页面间以及组件内部的页面跳转，支持在不同组件间传递跳转参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。本文将从组件导航（Navigation）的表现模式、路由操作、子页面管理、跨包跳转以及跳转动效等几个方面举行详细先容。
Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包罗单栏（Stack）、分栏（Split）和自顺应（Auto）三种表现模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由本领实现更加自然流通的转场体验，并提供多种标题栏样式来出现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件可以或许自动适配窗口表现巨细，在窗口较大的场景下自动切换分栏展示效果。
Navigation组件重要包罗​导航页和子页。导航页由标题栏（包罗菜单栏）、内容区和工具栏构成，可以通过hideNavBar属性举行隐蔽，导航页不存在页面栈中，与子页，以及子页之间可以通过路由操作举行切换。
设置页面表现模式

Navigation组件通过mode属性设置页面的表现模式。

• 自顺应模式
  Navigation组件默以为自顺应模式，此时mode属性为NavigationMode.Auto。自顺应模式下，当页面宽度大于即是一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。
  

1. Navigation(){
2.         //...
3. }
4. .mode(NavigationMode.Auto)

复制代码

• 单页面模式
  
  
  
  将mode属性设置为Navigation
  
  1. Navigation() {
  2.   // ...
  3. }
  4. .mode(NavigationMode.Stack)

  复制代码

• 分栏模式
  
  
  
  
  
  
  

设置标题栏模式

标题栏在界面顶部，用于出现界面名称和操作入口，Navigation组件通过titleMode属性设置标题栏模式。
   阐明
Navigation或NavDestination未设置主副标题而且没有返回键时，不表现标题栏。
  

• Mini模式
  平凡型标题栏，用于一级页面不必要突出标题的场景。
  
  
  
  
  1. Navigation() {
  2.   // ...
  3. }
  4. .titleMode(NavigationTitleMode.Mini)

  复制代码
• Full模式
  强调型标题栏，用于一级页面必要突出标题的场景。
  
  
  
  
  1. Navigation() {
  2.   // ...
  3. }
  4. .titleMode(NavigationTitleMode.Full)

  复制代码

设置菜单栏

菜单栏位于Navigation组件的右上角，开发者可以通过menus属性举行设置。menus支持Array< NavigationMenuItem>和CustomBuilder两种参数范例。使用Array< NavigationMenuItem>范例时，竖屏最多支持表现3个图标，横屏最多支持表现5个图标，多余的图标会被放入自动生成的更多图标。

1. let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
2. Navigation() {
3.   // ...
4. }
5. .menus([TooTmp,
6.   TooTmp,
7.   TooTmp])

复制代码

图片也可以引用resources中的资源。

1. let TooTmp : NavigationMenuItem = {'value':"",'icon':"resources/base/media/ic_public_highlights.svg",'action':()=>{}}
2. Navigation(){
3.         //...
4. }
5. .menus([
6.         TooTmp,
7.         TooTmp,
8.         TooTmp
9. ])

复制代码

假如设置了4个图标的菜单栏，则多余的会自动生成图标：

设置工具栏

工具栏位于Navigation组件的底部，开发者可以通过toolbarConfiguration属性举行设置。

1. let ToolTmp:ToolbarItem = {'value':"",'icon':"",'action':()=>{}}
2. let ToolBar:ToolbarItem[] = [ToolTmp,ToolTmp,ToolTmp];
3. Navitation(){
4. }.toolbarConfiguration(ToolBar)

复制代码

路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法举行，每个Navigation都必要创建并传入一个NavPathStack对象，用于管理页面。重要涉及页面跳转、页面返回、页面更换、页面删除、参数获取、路由拦截等功能。
   阐明
不建议开发者通过监听生命周期的方式管理本身的页面栈。

1. @Entity
2. @Component
3. struct Index{
4.         //创建一个页面栈对象并传入Navigation中
5.         pageStack: NavPathStack = new NavPatStack()
6.         build(){
7.                 Navigation(this.pageStack){
8.                 }
9.                 .title('Main')
10.         }
11. }

复制代码

页面跳转

NavPathStack通过Push相关的接口去实现页面跳转的功能，重要分为以下三类:

• 平凡跳转，通过页面的name去跳转，并可以携带param
  
  1. this.pageStack.pushPat({name:'PageOne',param:'PageOne Param'})
  2. this.pageStack.pushPathByName('PageOne','PageOne Param')

  复制代码
• 带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并举行处理
  
  1. this.pageStack.pushPathByName('PageOne','PageOne Param',(popInfo)=>{
  2.           console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
  4. })

  复制代码
• 带错误码的跳转，跳转竣事会触发异步回调，返回错误码信息。
  
  1. this.pageStack.pushDestination({name: "PageOne", param: "PageOne Param"})
  2.   .catch((error: BusinessError) => {
  3.     console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
  4.   }).then(() => {
  5.     console.info('Push destination succeed.');
  6.   });
  7. this.pageStack.pushDestinationByName("PageOne", "PageOne Param")
  8.   .catch((error: BusinessError) => {
  9.     console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
  10.   }).then(() => {
  11.     console.info('Push destination succeed.');
  12.   });

  复制代码

页面返回

NavPathStack通过Pop相关接口去实现页面返回功能。

1. //返回到上一页
2. this.pageStack.pop();
3. //返回到上一个 PageOne页面
4. this.pageStack.popToName("PageOne")
5. //返回到索引为1 的页面
6. this.pageStack.popToIndex(1)
7. //返回到根首页(清除栈中所有页面）
8. this.pageStack.clear()

复制代码

页面更换

NavPathStack通过Replace相关接口去实现页面更换功能。

1. //将栈顶的页面替换为PageOne
2. this.pageStack.replace({name:'PageOne',param:'PageOne Param})
3. this.pageStack.replaceByName('PageOne','PageOne Param')
4. //带错误码的替换，跳转结束会触发异步回调，返回错误码信息
5. this.pageStack.replaceDestination({name:'',param:''})
6. .catch((error: BusinessError)=>{
7.             console.error(`Replace destination failed, error code = ${error.code}, error.message = ${error.message}.`);
9. }).then(()=>{
10.         console.info()
11. })

复制代码

页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

1. //删除栈中name为pageOne的所有页面
2. this.pageStack.removeByName("PageOne");
3. //删除指定索引的页面
4. this.pageStack.removeByIndexes([1,3,5])
5. //删除指定id的页面
6. this.pageStack.removeByNavDestinationId("1")

复制代码

移动页面

NavPathStack通过Move相关接口去实现移动页面栈中特定页面到栈顶的功能。

1. //移动栈中name为PageOne的页面到栈顶
2. this.pageStack.moveToTop("PageOne")
3. //移动栈中索引为1的页面到栈顶
4. this.pageStack.moveIndexToTop(1)

复制代码

参数获取

NavPathStack通过Get相关接口去获取页面的一些参数。

1. // 获取栈中所有页面name集合
2. this.pageStack.getALLPathName()
3. //获取索引为1的页面参数
4. this.pageStack.getParamByIndex(1)
5. //获取PageOne页面的参数
6. this.pageStack.getParamByName("PageOne")
7. //获取PageOne页面的索引集合
8. this.pageStack.getIndexByName("PageOne")

复制代码

路由拦截

NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。该方法必要传入一个NavigationInterception对象，该对象包罗三个回调函数：

   阐明
无论是哪个回调，在进入回调时页面栈都已经发生了变化。
  开发者可以在willShow回调中通过修改路由栈来实现路由拦截重定向的本领。

1. this.pageStack.setInterception({
2.         willSow: (from:NavDestinationContext | "navBar",to:NavDestinationContext | "navBar",operation: NavigationOperation,animated:boolean)=>{
3.                 if (typeof to === "string") {
4.               console.log("target page is navigation home page.");
5.               return;
6.             }
7.             // 将跳转到PageTwo的路由重定向到PageOne
8.             let target: NavDestinationContext = to as NavDestinationContext;
9.             if (target.pathInfo.name === 'PageTwo') {
10.               target.pathStack.pop();
11.               target.pathStack.pushPathByName('PageOne', null);
12.             }
13.         }
14. })

复制代码

子页面

NavDestination是Navigation子页面的根容器，用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性，使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的表现范例，用于满足不同页面的诉求。
页面表现范例

• 标准范例
  NavDestination组件默以为标准范例，此时mode属性为NavDestinationMode.STANDARD。标准范例的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。
  
• 弹窗范例
  NavDestination设置mode为NavDestinationMode.DIALOG弹窗范例，此时整个NavDestination默认透明表现。弹窗范例的NavDestination表现和消散时不会影响下层标准范例的NavDestination的表现和生命周期，两者可以同时表现。
  1. // Dialog NavDestination
  2. @Entry
  3. @Component
  4. struct Index {
  5.    @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()
  7.    @Builder
  8.    PagesMap(name: string) {
  9.      if (name == 'DialogPage') {
  10.        DialogPage()
  11.      }
  12.    }
  14.    build() {
  15.      Navigation(this.pageStack) {
  16.        Button('Push DialogPage')
  17.          .margin(20)
  18.          .width('80%')
  19.          .onClick(() => {
  20.            this.pageStack.pushPathByName('DialogPage', '');
  21.          })
  22.      }
  23.      .mode(NavigationMode.Stack)
  24.      .title('Main')
  25.      .navDestination(this.PagesMap)
  26.    }
  27. }
  29. @Component
  30. export struct DialogPage {
  31.    @Consume('NavPathStack') pageStack: NavPathStack;
  33.    build() {
  34.      NavDestination() {
  35.        Stack({ alignContent: Alignment.Center }) {
  36.          Column() {
  37.            Text("Dialog NavDestination")
  38.              .fontSize(20)
  39.              .margin({ bottom: 100 })
  40.            Button("Close").onClick(() => {
  41.              this.pageStack.pop()
  42.            }).width('30%')
  43.          }
  44.          .justifyContent(FlexAlign.Center)
  45.          .backgroundColor(Color.White)
  46.          .borderRadius(10)
  47.          .height('30%')
  48.          .width('80%')
  49.        }.height("100%").width('100%')
  50.      }
  51.      .backgroundColor('rgba(0,0,0,0.5)')
  52.      .hideTitleBar(true)
  53.      .mode(NavDestinationMode.DIALOG)
  54.    }
  55. }

  复制代码
  
  
  

页面生命周期

Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件变乱的形式开放。
其生命周期大抵可分为三类，自界说组件生命周期、通用组件生命周期和自有生命周期。其中，aboutToAppear和aboutToDisappear是自界说组件的生命周期(NavDestination外层包罗的自界说组件)，OnAppear和OnDisappear是组件的通用生命周期。剩下的六个生命周期为NavDestination独有。

页面监听和查询

为了方便组件跟页面解耦，在NavDestination子页面内部的自界说组件可以通过全局方法监听或查询到页面的一些状态信息。

• 页面信息查询
  自界说组件提供queryNavDestinationInfo方法，可以在NavDestination内部查询到当前所属页面的信息，返回值为NavDestinationInfo，若查询不到则返回undefined。
  
  1. import { uiObserver } from '@kit.ArkUI';
  3. // NavDestination内的自定义组件
  4. @Component
  5. struct MyComponent {
  6.    navDesInfo: uiObserver.NavDestinationInfo | undefined
  8.    aboutToAppear(): void {
  9.      this.navDesInfo = this.queryNavDestinationInfo();
  10.    }
  12.    build() {
  13.        Column() {
  14.          Text("所属页面Name: " + this.navDesInfo?.name)
  15.        }.width('100%').height('100%')
  16.    }
  17. }

  复制代码
• 页面状态监听
  通过observer.on(‘navDestinationUpdate’) 提供的注册接口可以注册NavDestination生命周期变化的监听，使用方式如下：
  
  1. uiObserver.on('navDestinationUpdate', (info) => {
  2.      console.info('NavDestination state update', JSON.stringify(info));
  3. });

  复制代码
  也可以注册页面切换的状态回调，能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo，而且提供了UIAbilityContext和UIContext不同范围的监听：
  
  1. // 在UIAbility中使用
  2. import { UIContext, uiObserver } from '@kit.ArkUI';
  4. // callBackFunc 是开发者定义的监听回调函数
  5. function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {}
  6. uiObserver.on('navDestinationSwitch', this.context, callBackFunc);
  8. // 可以通过窗口的getUIContext()方法获取对应的UIContent
  9. uiContext: UIContext | null = null;
  10. uiObserver.on('navDestinationSwitch', this.uiContext, callBackFunc);

  复制代码

页面转场

Navigation默认提供了页面切换的转场动画，通过页面栈操作时，会触发不同的转场效果（API version 13之前，Dialog范例的页面默认无转场动画。从API version13开始，Dialog范例的页面支持体系转场动画。），Navigation也提供了关闭体系转场、自界说转场以及共享元素转场的本领。
关闭转场

• 全局关闭
  Navigation通过NavPathStack中提供的disableAnimation方法可以在当前Navigation中关闭或打开所有转场动画。
  
  1. pageStack: NavPathStack = new NavPathStack()
  3. aboutToAppear(): void {
  4.   this.pageStack.disableAnimation(true)
  5. }

  复制代码
• 单次关闭
  NavPathStack中提供的Push、Pop、Replace等接口中可以设置animated参数，默以为true表现有转场动画，必要单次关闭转场动画可以置为false，不影响下次转场动画。
  
  1. pageStack: NavPathStack = new NavPathStack()
  3. this.pageStack.pushPath({ name: "PageOne" }, false)
  4. this.pageStack.pop(false)

  复制代码

自界说转场

详细示例代码可以参考Navigation自界说转场示例。
共享元素转场

NavDestination之间切换时可以通过geometryTransition实现共享元素转场。设置了共享元素转场的页面同时必要关闭体系默认的转场动画。

• 为必要实现共享元素转场的组件添加geometryTransition属性，id参数必须在两个NavDestination之间保持同等。
  
  1. // 起始页配置共享元素id
  2. NavDestination() {
  3.   Column() {
  4.     // ...
  5.     Image($r('app.media.startIcon'))
  6.     .geometryTransition('sharedId')
  7.     .width(100)
  8.     .height(100)
  9.   }
  10. }
  11. .title('FromPage')
  13. // 目的页配置共享元素id
  14. NavDestination() {
  15.   Column() {
  16.     // ...
  17.     Image($r('app.media.startIcon'))
  18.     .geometryTransition('sharedId')
  19.     .width(200)
  20.     .height(200)
  21.   }
  22. }
  23. .title('ToPage')

  复制代码
• 将页面路由的操作，放到animateTo动画闭包中，设置对应的动画参数以及关闭体系默认的转场。
  
  1. NavDestination() {
  2.   Column() {
  3.     Button('跳转目的页')
  4.     .width('80%')
  5.     .height(40)
  6.     .margin(20)
  7.     .onClick(() => {
  8.         this.getUIContext()?.animateTo({ duration: 1000 }, () => {
  9.           this.pageStack.pushPath({ name: 'ToPage' }, false)
  10.         })
  11.     })
  12.   }
  13. }
  14. .title('FromPage')

  复制代码

挎包动态路由

示例代码

导航转场

导航转场是页面的路由转场方式，也就是一个界面消散，另外一个界面出现的动画效果。开发者也可以自界说导航转场的动画效果，详细请参考Navigation示例3。
导航转场保举使用Navigation组件实现，可搭配NavDestination组件实现导航功能。
创建导航页

实现步骤为：
1.使用Navigation创建导航主页，并创建路由栈NavPathStack以此来实现不同页面之间的跳转。
2.在Navigation中增加List组件，来界说导航主页中不同的一级界面。
3.在List内的组件添加onClick方法，并在其中使用路由栈NavPathStack的pushPathByName方法，使组件可以在点击之后从当前页面跳转到输入参数name在路由表内对应的页面。

1. //PageOne.ets
2. @Entry
3. @Component
4. struct NavigationDemo {
5.   @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();
6.   private listArray: Array<string> = ['WLAN', 'Bluetooth', 'Personal Hotpot', 'Connect & Share'];
8.   build() {
9.     Column() {
10.       Navigation(this.pathInfos) {
11.         TextInput({ placeholder: '输入关键字搜索' })
12.           .width('90%')
13.           .height(40)
14.           .margin({ bottom: 10 })
16.         // 通过List定义导航的一级界面
17.         List({ space: 12, initialIndex: 0 }) {
18.           ForEach(this.listArray, (item: string) => {
19.             ListItem() {
20.               Row() {
21.                 Row() {
22.                   Text(`${item.slice(0, 1)}`)
23.                     .fontColor(Color.White)
24.                     .fontSize(14)
25.                     .fontWeight(FontWeight.Bold)
26.                 }
27.                 .width(30)
28.                 .height(30)
29.                 .backgroundColor('#a8a8a8')
30.                 .margin({ right: 20 })
31.                 .borderRadius(20)
32.                 .justifyContent(FlexAlign.Center)
34.                 Column() {
35.                   Text(item)
36.                     .fontSize(16)
37.                     .margin({ bottom: 5 })
38.                 }
39.                 .alignItems(HorizontalAlign.Start)
41.                 Blank()
43.                 Row()
44.                   .width(12)
45.                   .height(12)
46.                   .margin({ right: 15 })
47.                   .border({
48.                     width: { top: 2, right: 2 },
49.                     color: 0xcccccc
50.                   })
51.                   .rotate({ angle: 45 })
52.               }
53.               .borderRadius(15)
54.               .shadow({ radius: 100, color: '#ededed' })
55.               .width('90%')
56.               .alignItems(VerticalAlign.Center)
57.               .padding({ left: 15, top: 15, bottom: 15 })
58.               .backgroundColor(Color.White)
59.             }
60.             .width('100%')
61.             .onClick(() => {
62.               this.pathInfos.pushPathByName(`${item}`, '详情页面参数')//将name指定的NaviDestination页面信息入栈,传递的参数为param
63.             })
64.           }, (item: string): string => item)
65.         }
66.         .listDirection(Axis.Vertical)
67.         .edgeEffect(EdgeEffect.Spring)
68.         .sticky(StickyStyle.Header)
69.         .chainAnimation(false)
70.         .width('100%')
71.       }
72.       .width('100%')
73.       .mode(NavigationMode.Auto)
74.       .title('设置') // 设置标题文字
75.     }
76.     .size({ width: '100%', height: '100%' })
77.     .backgroundColor(0xf4f4f5)
78.   }
79. }

复制代码

创建导航子页

导航子页1实现步骤

1.使用NavDestination，来创建导航子页CommonPage。
2.创建路由栈NavPathStack并在onReady时举行初始化，获取当前地点的页面栈，以此来实现不同页面之间的跳转。
3.在子页面内的组件添加onClick，并在其中使用路由栈NavPathStack的pop方法，使组件可以在点击之后弹出路由栈栈顶元素实现页面的返回。

1. //PageOne.ets
2. ........
3. 此处省略 NavigationDemo 导航主页代码,,,
4. ........
6. @Builder
7. export function MyCommonPageBuilder(name: string, param: string) {
8.   MyCommonPage({ name: name, value: param })
9. }
11. @Component
12. export struct MyCommonPage {
13.   pathInfos: NavPathStack = new NavPathStack();
14.   name: String = '';
15.   @State value: String = '';
17.   build() {
18.     NavDestination() {
19.       Column() {
20.         Text(`${this.name}设置页面`)
21.           .width('100%')
22.           .fontSize(20)
23.           .fontColor(0x333333)
24.           .textAlign(TextAlign.Center)
25.           .textShadow({
26.             radius: 2,
27.             offsetX: 4,
28.             offsetY: 4,
29.             color: 0x909399
30.           })
31.           .padding({ top: 30 })
32.         Text(`${JSON.stringify(this.value)}`)
33.           .width('100%')
34.           .fontSize(18)
35.           .fontColor(0x666666)
36.           .textAlign(TextAlign.Center)
37.           .padding({ top: 45 })
38.         Button('返回')
39.           .width('50%')
40.           .height(40)
41.           .margin({ top: 50 })
42.           .onClick(() => {
43.             //弹出路由栈栈顶元素，返回上个页面
44.             this.pathInfos.pop();
45.           })
46.       }
47.       .size({ width: '100%', height: '100%' })
48.     }.title(`${this.name}`)
49.     .onReady((ctx: NavDestinationContext) => {
50.       //NavDestinationContext获取当前所在的页面栈
51.       this.pathInfos = ctx.pathStack;
52.     })
54.   }
55. }

复制代码

导航子页2实现步骤

1.使用NavDestination，来创建导航子页SharePage。
2.创建路由栈NavPathStack并在onReady时举行初始化，获取当前地点的页面栈，以此来实现不同页面之间的跳转。
3.在子页面内的组件添加onClick，并在其中使用路由栈NavPathStack的pushPathByName方法，使组件可以在点击之后从当前页面跳转到输入参数name在路由表内对应的页面。

1. ........
2. 此处省略 NavigationDemo 导航主页代码,,,
3. ........
5. ........
6. 此处省略 CommonPage 导航子页代码,,,
7. ........
8. //PageTwo.ets
9. @Builder
10. export function MySharePageBuilder(name: string, param: string) {
11.   MySharePage({ name: name })
12. }
14. @Component
15. export struct MySharePage {
16.   pathInfos: NavPathStack = new NavPathStack();
17.   name: String = '';
18.   private listArray: Array<string> = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC'];
20.   build() {
21.     NavDestination() {
22.       Column() {
23.         List({ space: 12, initialIndex: 0 }) {
24.           ForEach(this.listArray, (item: string) => {
25.             ListItem() {
26.               Row() {
27.                 Row() {
28.                   Text(`${item.slice(0, 1)}`)
29.                     .fontColor(Color.White)
30.                     .fontSize(14)
31.                     .fontWeight(FontWeight.Bold)
32.                 }
33.                 .width(30)
34.                 .height(30)
35.                 .backgroundColor('#a8a8a8')
36.                 .margin({ right: 20 })
37.                 .borderRadius(20)
38.                 .justifyContent(FlexAlign.Center)
40.                 Column() {
41.                   Text(item)
42.                     .fontSize(16)
43.                     .margin({ bottom: 5 })
44.                 }
45.                 .alignItems(HorizontalAlign.Start)
47.                 Blank()
49.                 Row()
50.                   .width(12)
51.                   .height(12)
52.                   .margin({ right: 15 })
53.                   .border({
54.                     width: { top: 2, right: 2 },
55.                     color: 0xcccccc
56.                   })
57.                   .rotate({ angle: 45 })
58.               }
59.               .borderRadius(15)
60.               .shadow({ radius: 100, color: '#ededed' })
61.               .width('90%')
62.               .alignItems(VerticalAlign.Center)
63.               .padding({ left: 15, top: 15, bottom: 15 })
64.               .backgroundColor(Color.White)
65.             }
66.             .width('100%')
67.             .onClick(() => {
68.               this.pathInfos.pushPathByName(`${item}`, '页面设置参数')
69.             })
70.           }, (item: string): string => item)
71.         }
72.         .listDirection(Axis.Vertical)
73.         .edgeEffect(EdgeEffect.Spring)
74.         .sticky(StickyStyle.Header)
75.         .width('100%')
76.       }
77.       .size({ width: '100%', height: '100%' })
78.     }.title(`${this.name}`)
79.     .onReady((ctx: NavDestinationContext) => {
80.       //NavDestinationContext获取当前所在的页面栈
81.       this.pathInfos = ctx.pathStack;
82.     })
83.   }
84. }

复制代码

创建路由跳转

1.工程设置文件module.json5中设置 “routerMap”: “$profile:route_map”。

2.route_map.json中设置全局路由表，路由栈NavPathStack可根据路由表中的name将对应页面信息入栈。

1. {
2.   "routerMap" : [
3.     {
4.       "name" : "WLAN",
5.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
6.       "buildFunction" : "MyCommonPageBuilder"
7.     },
8.     {
9.       "name" : "Bluetooth",
10.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
11.       "buildFunction" : "MyCommonPageBuilder"
12.     },
13.     {
14.       "name" : "Personal Hotpot",
15.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
16.       "buildFunction" : "MyCommonPageBuilder"
17.     },
18.     {
19.       "name" : "Connect & Share",
20.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
21.       "buildFunction" : "MySharePageBuilder"
22.     },
23.     {
24.       "name" : "Projection",
25.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
26.       "buildFunction" : "MyCommonPageBuilder"
27.     },
28.     {
29.       "name" : "Print",
30.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
31.       "buildFunction" : "MyCommonPageBuilder"
32.     },
33.     {
34.       "name" : "VPN",
35.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
36.       "buildFunction" : "MyCommonPageBuilder"
37.     },
38.     {
39.       "name" : "Private DNS",
40.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
41.       "buildFunction" : "MyCommonPageBuilder"
42.     },
43.     {
44.       "name" : "NFC",
45.       "pageSourceFile"  : "src/main/ets/pages/NavigationDemo.ets",
46.       "buildFunction" : "MyCommonPageBuilder"
47.     }
48.   ]
49. }

复制代码

效果如下：

页面路由（@ohos.router）（不保举）

Router切换Navigation

鉴于组件导航(Navigation)支持更丰富的动效、一次开发多端部署本领和更灵活的栈操作。本文重要从页面跳转、动效和生命周期等方面先容怎样从Router切换到Navigation。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。