鸿蒙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" })
相关推荐
编程乐学23 分钟前
网络资源模板--基于Android Studio 实现的运动场馆预约
android·android studio·大作业·移动端开发·安卓移动开发·场馆预约·运动场馆预约
编程乐学23 分钟前
网络资源模板--基于Android Studio 实现的画板App
android·android studio·画图·移动端开发·画板·安卓大作业
程序员编程指南24 分钟前
Qt 嵌入式 Linux 系统定制全指南
linux·c语言·开发语言·c++·qt
皓月盈江2 小时前
Linux Deepin深度操作系统应用商店加载失败,安装星火应用商店
linux·debian·deepin·国产操作系统·深度操作系统·星火应用商店·deepin应用商店加载失败
Linux技术芯3 小时前
#Linux内存管理# 详细介绍madvise函数的工作原理
linux
Hey! Hey!3 小时前
在 Ubuntu 22.04 上运行 cAdvisor 时遇到 mountpoint for cpu not found 错误
linux·运维·ubuntu
渡我白衣4 小时前
Linux网络编程:基于UDP 的聊天室雏形
linux·网络·udp
gnawkhhkwang5 小时前
io_getevents 和 io_pgetevents 系统调用及示例
linux·c语言·开发语言
一笑的小酒馆5 小时前
Android15适配和Google上架问题
android
朱小弟cs65 小时前
Orange的运维学习日记--23.Linux计划任务详解
linux·运维·学习