鸿蒙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" })
相关推荐
用户51681661458415 分钟前
[VMware 无法检测此光盘中映像中的操作系统] VMware创建虚拟机无法检测操作系统iso镜像文件
linux·前端
MacroZheng5 分钟前
斩获 7.8K star!一款堪称开源监控新标杆的项目,牛皮!
java·linux·后端
用户0913 分钟前
Gradle声明式构建总结
android
用户0938 分钟前
Gradle插件开发实践总结
android
博语小屋41 分钟前
程序(进程)地址空间(1)
linux
yunyi41 分钟前
使用acme.sh来实现自动化申请和续订TLS证书
linux·nginx·docker
未来可期LJ1 小时前
【Linux 小实战】自定义 Shell 的编写
linux·服务器
_君落羽_2 小时前
Linux操作系统——TCP服务端并发模型
linux·服务器·c++
望获linux4 小时前
【Linux基础知识系列】第一百一十篇 - 使用Nmap进行网络安全扫描
java·linux·开发语言·前端·数据库·信息可视化·php
花小璇学linux10 小时前
imx6ull-驱动开发篇42——Linux I2C 驱动框架简介
linux·驱动开发·嵌入式软件