鸿蒙Next开发,配置Navigation的Route

1. 通过router_map.json配置文件进行

  1. 创建页面
  2. 配置router_map.json
typescript 复制代码
{
  "routerMap": [
    {
      "name": "StateExamplePage",
      "pageSourceFile": "src/main/ets/pages/state/StateExamplePage.ets",
      "buildFunction": "PageBuilder"
    },
    ......
}
  1. 跳转

2. 使用pageBuilder()方法进行

  1. 创建三个页面
typescript 复制代码
@Component
export struct pageOneTmp {}
@Component
export struct pageTwoTmp {}
@Component
export struct pageThreeTmp {}
  1. 创建PageMap函数
ts 复制代码
  @Builder
  PageMap(name: string) {
    if (name === "NavDestinationTitle1") {
      pageOneTmp()
    } else if (name === "NavDestinationTitle2") {
      pageTwoTmp()
    } else if (name === "NavDestinationTitle3") {
      pageThreeTmp()
    }
  }
  1. Navigation使用PageMap函数
typescript 复制代码
  Navigation(this.pageInfos) {
  }
  .title("主标题")
  .mode(NavigationMode.Split)
  .navDestination(this.PageMap)
  1. 跳转
typescript 复制代码
this.pageInfos.pushPath({ name: "NavDestinationTitle1" })
this.pageInfos.pushPath({ name: "NavDestinationTitle2" })
this.pageInfos.pushPath({ name: "NavDestinationTitle3" })
相关推荐
退役小学生呀41 分钟前
二十三、K8s企业级架构设计及落地
linux·云原生·容器·kubernetes·k8s
onthewaying1 小时前
OpenGL ES 着色器(Shader)详解
android·opengl
凤山老林1 小时前
SpringBoot 如何实现零拷贝:深度解析零拷贝技术
java·linux·开发语言·arm开发·spring boot·后端
西贝爱学习1 小时前
快速下载jdk17+Android Studio 2025
android·ide·android studio
云计算练习生1 小时前
linux shell编程实战 04 条件判断与流程控制
linux·运维·流程控制·shell编程·条件判断
至善迎风1 小时前
如何让 Ubuntu 服务器在你关机后继续执行命令
linux·服务器·ubuntu·进程
jjw_zyfx1 小时前
Ubuntu上vue3 vite使用MBTiles搭建地图服务器
服务器·数据库·ubuntu
2501_915921431 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
侑虎科技2 小时前
对Android游戏画面抖动现象的研究
android·性能优化
岚天start2 小时前
CentOS系统yum list使用指南
linux·运维·centos·list·yum·repoquery