鸿蒙开发入门day11-Router切换Navigation

最新推荐文章于 2024-08-24 17:09:25 发布
最新推荐文章于 2024-08-24 17:09:25 发布
阅读量1.5k 收藏 70
点赞数 89
分类专栏： 鸿蒙开发入门 文章标签： html HarmonyOS 华为 harmonyos 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73295475/article/details/141425828
版权

 (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，还请三连支持一波哇ヾ(＠^∇^＠)ノ）

目录

架构差异

能力对标

切换指导

页面结构

路由操作

生命周期

转场动画

共享元素转场

动态路由

生命周期监听

页面信息查询

路由拦截

架构差异

从ArkUI组件树层级上来看，原先由Router管理的page在页面栈管理节点stage的下面。Navigation作为导航容器组件，可以挂载在单个page节点下，也可以叠加、嵌套。Navigation管理了标题栏、内容区和工具栏，内容区用于显示用户自定义页面的内容，并支持页面的路由能力。Navigation的这种设计上有如下优势：

  1. 接口上显式区分标题栏、内容区和工具栏，实现更加灵活的管理和UX动效能力；

  2. 显式提供路由容器概念，由开发者决定路由容器的位置，支持在全模态、半模态、弹窗中显示；

  3. 整合UX设计和一多能力，默认提供统一的标题显示、页面切换和单双栏适配能力；

  4. 基于通用UIBuilder能力，由开发者决定页面别名和页面UI对应关系，提供更加灵活的页面配置能力；

  5. 基于组件属性动效和共享元素动效能力，将页面切换动效转换为组件属性动效实现，提供更加丰富和灵活的切换动效；

  6. 开放了页面栈对象，开发者可以继承，能更好的管理页面显示。

能力对标

业务场景NavigationRouter
一多能力支持，Auto模式自适应单栏跟双栏显示不支持
跳转指定页面pushPath & pushDestinationpushUrl & pushNameRoute
跳转HSP中页面支持支持
跳转HAR中页面支持支持
跳转传参支持支持
获取指定页面参数支持不支持
传参类型传参为对象形式传参为对象形式，对象中暂不支持方法变量
跳转结果回调支持支持
跳转单例页面支持支持
页面返回支持支持
页面返回传参支持支持
返回指定路由支持支持
页面返回弹窗支持，通过路由拦截实现showAlertBeforeBackPage
路由替换replacePath & replacePathByNamereplaceUrl & replaceNameRoute
路由栈清理clearclear
清理指定路由removeByIndexes & removeByName不支持
转场动画支持支持
自定义转场动画支持支持，动画类型受限
屏蔽转场动画支持全局和单次支持 设置pageTransition方法duration为0
geometryTransition共享元素动画支持（NavDestination之间共享）不支持
页面生命周期监听UIObserver.on('navDestinationUpdate')UIObserver.on('routerPageUpdate')
获取页面栈对象支持不支持
路由拦截支持通过setInterception做路由拦截不支持
路由栈信息查询支持getState() & getLength()
路由栈move操作moveToTop & moveIndexToTop不支持
沉浸式页面支持不支持，需通过window配置
设置页面标题栏（titlebar）和工具栏（toolbar）支持不支持
模态嵌套路由支持不支持

切换指导

页面结构

Router路由的页面是一个@Entry修饰的Component，每一个页面都需要在main_page.json中声明。

// main_page.json
{
  "src": [
    "pages/Index",
    "pages/pageOne",
    "pages/pageTwo"
  ]
}

以下为Router页面的示例。

// index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

而基于Navigation的路由页面分为导航页和子页，导航页又叫Navbar，是Navigation包含的子组件，子页是NavDestination包含的子组件。

以下为Navigation导航页的示例。

// index.ets
@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pathStack) {
      Column() {
        Button('Push PageOne', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pathStack.pushPathByName('pageOne', null)
          })
      }.width('100%').height('100%')
    }
    .title("Navigation")
  }
}

每个子页也需要配置到系统配置文件route_map.json中（参考系统路由配置）。

// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"}
// route_map.json
{
  "routerMap": [
    {
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description": "this is pageOne"
      }
    }
  ]
}

路由操作

Router通过@ohos.router模块提供的方法来操作页面，使用前需要先import。

import { router } from '@kit.ArkUI';

// push page
router.pushUrl({ url:"pages/pageOne", params: null })

// pop page
router.back({ url: "pages/pageOne" })

// replace page
router.replaceUrl({ url: "pages/pageOne" })

// clear all page
router.clear()

// 获取页面栈大小
let size = router.getLength()

// 获取页面状态
let pageState = router.getState()

Navigation通过页面栈对象NavPathStack提供的方法来操作页面，需要创建一个栈对象并传入Navigation中。

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack()

  build() {
    // 设置NavPathStack并传入Navigation
    Navigation(this.pathStack) {
        ...
    }.width('100%').height('100%')
  }
  .title("Navigation")
}



// push page
this.pathStack.pushPath({ name: 'pageOne' })

// pop page
this.pathStack.pop()
this.pathStack.popToIndex(1)
this.pathStack.popToName('pageOne')

// replace page
this.pathStack.replacePath({ name: 'pageOne' })

// clear all page
this.pathStack.clear()

// 获取页面栈大小
let size = this.pathStack.size()

// 删除栈中name为PageOne的所有页面
this.pathStack.removeByName("pageOne")

// 删除指定索引的页面
this.pathStack.removeByIndexes([1,3,5])

// 获取栈中所有页面name集合
this.pathStack.getAllPathName()

// 获取索引为1的页面参数
this.pathStack.getParamByIndex(1)

// 获取PageOne页面的参数
this.pathStack.getParamByName("pageOne")

// 获取PageOne页面的索引集合
this.pathStack.getIndexByName("pageOne")
...

Router作为全局通用模块，可以在任意页面中调用，Navigation作为组件，子页面想要做路由需要拿到Navigation持有的页面栈对象NavPathStack，可以通过如下几种方式获取：

方式一：通过@Provide和@Consume传递给子页面（有耦合，不推荐）。

// Navigation根容器
@Entry
@Component
struct Index {
  // Navigation创建一个Provide修饰的NavPathStack
 @Provide('pathStack') pathStack: NavPathStack

  build() {
    Navigation(this.pathStack) {
        ...
      }.width('100%').height('100%')
    }
    .title("Navigation")
  }
}

// Navigation子页面
@Component
export struct PageOne {
  // NavDestination通过Consume获取到
  @Consume('pathStack') pathStack: NavPathStack;

  build() {
    NavDestination() {
      ...
    }
    .title("PageOne")
  }
}

方式二：子页面通过OnReady回调获取。

@Component
export struct PageOne {
  pathStack: NavPathStack = new NavPathStack()

  build() {
    NavDestination() {
      ...
    }.title('PageOne')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack
    })
  }
}

方式三： 通过全局的AppStorage接口设置获取。

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack()

  // 全局设置一个NavPathStack
  aboutToAppear(): void {
     AppStorage.setOrCreate("PathStack", this.pathStack)
   }

  build() {
    Navigation(this.pathStack) {
        ...
      }.width('100%').height('100%')
    }
    .title("Navigation")
  }
}

// Navigation子页面
@Component
export struct PageOne {
  // 子页面中获取全局的NavPathStack
  pathStack: NavPathStack = AppStorage.get("PathStack") as NavPathStack

  build() {
    NavDestination() {
      ...
    }
    .title("PageOne")
  }
}

生命周期

Router页面生命周期为@Entry页面中的通用方法，主要有如下四个生命周期：

// 页面创建后挂树的回调
aboutToAppear(): void {
}

// 页面销毁前下树的回调  
aboutToDisappear(): void {
}

// 页面显示时的回调  
onPageShow(): void {
}

// 页面隐藏时的回调  
onPageHide(): void {
}

其生命周期时序如下图所示：

Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事件的形式开放。

@Component
struct PageOne {

  aboutToDisappear() {
  }

  aboutToAppear() {
  }

  build() {
    NavDestination() {
      ...
    }
    .onWillAppear(()=>{
    })
    .onAppear(()=>{
    })
    .onWillShow(()=>{
    })
    .onShown(()=>{
    })
    .onWillHide(()=>{
    })
    .onHidden(()=>{
    })
    .onWillDisappear(()=>{
    })
    .onDisAppear(()=>{
    })
  }
}

转场动画

Router和Navigation都提供了系统的转场动画也提供了自定义转场的能力。

其中Router自定义页面转场通过通用方法pageTransition()实现

Navigation作为路由容器组件，其内部的页面切换动画本质上属于组件跟组件之间的属性动画，可以通过Navigation中的customNavContentTransition事件提供自定义转场动画的能力，（注意：Dialog类型的页面当前没有转场动画）

共享元素转场

页面和页面之间跳转的时候需要进行共享元素过渡动画，Router可以通过通用属性sharedTransition来实现共享元素转场

Navigation也提供了共享元素一镜到底的转场能力，需要配合geometryTransition属性，在子页面（NavDestination）之间切换时，可以实现共享元素转场

动态路由

动态路由设计的目的是解决多个产品（Hap）之间可以复用相同的业务模块，各个业务模块之间解耦（模块之间跳转通过路由表跳转，不需要互相依赖）和路由功能扩展整合。

业务特性模块对外暴露的就是模块内支持完成具体业务场景的多个页面的集合；路由管理就是将每个模块支持的页面都用统一的路由表结构管理起来。 当产品需要某个业务模块时，就会注册对应的模块的路由表。

动态路由的优势：

  1. 路由定义除了跳转的URL以外，可以丰富的配置任意扩展信息，如横竖屏默认模式，是否需要鉴权等等，做路由跳转时的统一处理。
  2. 给每个路由设置一个名字，按照名称进行跳转而不是ets文件路径。
  3. 页面的加载可以使用动态Import（按需加载），防止首个页面加载大量代码导致卡顿。

Router实现动态路由主要有下面三个过程：

  1. 定义过程： 路由表定义新增路由 -> 页面文件绑定路由名称（装饰器） -> 加载函数和页面文件绑定（动态import函数）

  2. 定义注册过程： 路由注册（可在入口ability中按需注入依赖模块的路由表）。

  3. 跳转过程： 路由表检查(是否注册过对应路由名称) -> 路由前置钩子（路由页面加载-动态Import） -> 路由跳转 -> 路由后置钩子（公共处理，如打点）。

Navigation实现动态路由有如下两种实现方案：

方案一： 自定义路由表

基本实现跟上述Router动态路由类似。

  1. 开发者自定义路由管理模块，各个提供路由页面的模块均依赖此模块；
  2. 构建Navigation组件时，将NavPathStack注入路由管理模块，路由管理模块对NavPathStack进行封装，对外提供路由能力；
  3. 各个路由页面不再提供组件，转为提供@build封装的构建函数，并再通过WrappedBuilder封装后，实现全局封装；
  4. 各个路由页面将模块名称、路由名称、WrappedBuilder封装后构建函数注册如路由模块。
  5. 当路由需要跳转到指定路由时，路由模块完成对指定路由模块的动态导入，并完成路由跳转。

方案二： 系统路由表

从API version 12版本开始，Navigation支持系统跨模块的路由表方案，整体设计是将路由表方案下沉到系统中管理，即在需要路由的各个业务模块（HSP/HAR）中独立配置router_map.json文件，在触发路由跳转时，应用只需要通过NavPathStack进行路由跳转，此时系统会自动完成路由模块的动态加载、组件构建，并完成路由跳转功能，从而实现了开发层面的模块解耦。

生命周期监听

Router可以通过observer实现注册监听，接口定义请参考：Router无感监听。

import { uiObserver } from '@kit.ArkUI';

function callBackFunc(info: uiObserver.RouterPageInfo) {
    console.info("RouterPageInfo is : " + JSON.stringify(info))
}

// used in ability context.
uiObserver.on('routerPageUpdate', this.context, callBackFunc);

// used in UIContext.
uiObserver.on('routerPageUpdate', this.getUIContext(), callBackFunc);

在页面状态发生变化时，注册的回调将会触发，开发者可以通过回调中传入的入参拿到页面的相关信息，如：页面的名字，索引，路径，生命周期状态等。

Navigation同样可以通过在observer中实现注册监听。

export default class EntryAbility extends UIAbility {
  ...
  onWindowStageCreate(windowStage: window.WindowStage): void {
    ...
    windowStage.getMainWindow((err: BusinessError, data) => {
      ...
      windowClass = data;
      // 获取UIContext实例。
      let uiContext: UIContext = windowClass.getUIContext();
      // 获取UIObserver实例。
      let uiObserver : UIObserver = uiContext.getUIObserver();
      // 注册DevNavigation的状态监听.
      uiObserver.on("navDestinationUpdate",(info) => {
        // NavDestinationState.ON_SHOWN = 0, NavDestinationState.ON_HIDE = 1
        if (info.state == 0) {
          // NavDestination组件显示时操作
          console.info('page ON_SHOWN:' + info.name.toString());
        }
      })
    })
  }
}

页面信息查询

为了实现页面内自定义组件跟页面解耦，自定义组件中提供了全局查询页面信息的接口。

Router可以通过queryRouterPageInfo接口查询当前自定义组件所在的Page页面的信息，其返回值包含如下几个属性，其中pageId是页面的唯一标识符：

名称类型必填说明
contextUIAbilityContext/ UIContext是routerPage页面对应的上下文信息
indexnumber是routerPage在栈中的位置。
namestring是routerPage页面的名称。
pathstring是routerPage页面的路径。
stateRouterPageState是routerPage页面的状态
pageId12+string是routerPage页面的唯一标识
import { uiObserver } from '@kit.ArkUI';

// 页面内的自定义组件
@Component
struct MyComponent {
  aboutToAppear() {
    let info: uiObserver.RouterPageInfo | undefined = this.queryRouterPageInfo();
  }

  build() {
    // ...
  }
}

Navigation也可以通过queryNavDestinationInfo接口查询当前自定义组件所在的NavDestination的信息，其返回值包含如下几个属性，其中navDestinationId是页面的唯一标识符：

名称类型必填说明
navigationIdResourceStr是包含NavDestination组件的Navigation组件的id。
nameResourceStr是NavDestination组件的名称。
stateNavDestinationState是NavDestination组件的状态。
index12+number是NavDestination在页面栈中的索引。
param12+Object否NavDestination组件的参数。
navDestinationId12+string是NavDestination组件的唯一标识ID。
import { uiObserver } from '@kit.ArkUI';

@Component
export struct NavDestinationExample {
  build() {
    NavDestination() {
      MyComponent()
    }
  }
}

@Component
struct MyComponent {
  navDesInfo: uiObserver.NavDestinationInfo | undefined

  aboutToAppear() {
    this.navDesInfo = this.queryNavDestinationInfo();
    console.log('get navDestinationInfo: ' + JSON.stringify(this.navDesInfo))
  }

  build() {
    // ...
  }
}

路由拦截

Router原生没有提供路由拦截的能力，开发者需要自行封装路由跳转接口，并在自己封装的接口中做路由拦截的判断并重定向路由。

Navigation提供了setInterception方法，用于设置Navigation页面跳转拦截回调。

小周不摆烂
关注
  • 89
    点赞
  • 踩
  • 70
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 66
    评论
专栏目录
「HarmonyNextOS」页面路由跳转Router更换为Navigation
danjiujiaohun的博客
08-08 1104
这篇文件主要讲述HarmonyOS系统下两种路由跳转的前后架构差异和变化，以及两种路由跳转的具体使用方法
HarmonyOS Next 自定义路由栈管理
shudaoshanQAQ的博客
03-19 1089
本示例将介绍如何使用动态路由跳转到模块中的页面，以及如何使用动态import的方式加载模块
鸿蒙 HarmonyOS Next 路由 不废话 全干货
制定持续可量化的目标，不断坚持。
07-05 613
（1）直接通过创建一个新的Page的方式创建（2）先创建一个 ArkTs File文件，然后在resources/base/profile/main_pages.json中加上页面对应的src路径，下面的Index_3.ets文件是通过创建ArkTs File文件生成的，需要加上src路径加上路径后的显示： 普通跳转（可以返回） 相当于栈，可以每次跳转都是入栈，每次返回都是出栈，页面栈的最大容量是32个页面提示：页面地址是resources/base/profile/main_pages.json里
【鸿蒙HarmonyOS开发笔记】关于页面路由（router）详解
温的打怪之旅
03-18 6258
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从页面跳转、页面返回和页面返回前增加一个询问框几个方面介绍Router模块提供的功能。自定义询问框的方式，可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。本文以弹窗为例，介绍如何实现自定义询问框。在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。
HarmonyOS NEXT实战开发：Router切换Navigation实战
hanyanyou的博客
07-25 929
从ArkUI组件树层级上来看，原先由Router管理的page在页面栈管理节点stage的下面。
HarmonyOS：NavPathStack的详细使用说明以及示例
luxingxing1的博客
07-09 1000
NavPathStack的详细使用说明以及示例
HarmonyOS Next开发学习手册——Router切换Navigation
maniuT的博客
07-02 1388
基本实现跟上述Router动态路由类似开发者自定义路由管理模块，各个提供路由页面的模块均依赖此模块；构建Navigation组件时，将NavPactStack注入路由管理模块，路由管理模块对NavPactStack进行封装，对外提供路由能力；各个路由页面不再提供组件，转为提供@build封装的构建函数，并再通过WrappedBuilder封装后，实现全局封装；各个路由页面将模块名称、路由名称、WrappedBuilder封装后构建函数注册如路由模块。
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
react-router-navigation-prompt：React路由器“ Prompt”的替换组件。 允许更灵活的对话框
02-12
react-router <Prompt/>的替换组件（仍然使用react-router起作用）。 允许更灵活的对话框。 注意：目前仅使用react-router的BrowserHistory进行了测试。 HashHistory存在问题： : 注意：当的props.when正确时...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
Vue-router 切换组件页面时进入进出动画方法
10-18
在Vue.js应用中，Vue-router是官方推荐的路由管理库，它使得页面间的导航和组件的切换变得简单而优雅。本文将深入探讨如何在Vue-router中实现组件页面切换时的进入和退出动画效果。 首先，我们需要在`App.vue`文件...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
鸿蒙Navigation路由能力汇总
qq_36859035的博客
07-17 331
属性汇总：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation。
只用一个 HTML 元素可以写出多少形状？——不规则图形篇
Conan9912345的博客
08-23 763
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
如何优雅的实现CRUD，包含微信小程序，API，HTML的表单(一)
最新发布
08-24 657
有没有一个动态表单，只要配置表单字段的属性，甚至不需要配置，直接从API读取，然后就可以显示的，自己只要写几行代码就可以实现一个表的新增和更新！
HTML DOM 对象
lly202406的博客
08-23 275
HTML DOM对象是JavaScript与HTML文档交互的桥梁。通过DOM，开发者可以轻松地访问和操作页面元素，实现动态内容和交互功能。掌握DOM是前端开发的重要技能之一。
简单实现进度条效果（vue2）
weixin_43811753的博客
08-20 438
如果用echarts或者其他图表来写个进度条有点大材小用，所以直接简单html、js写一下就可以；以下代码基于vue2，部分代码来自国内直连。
Vue插值：双大括号标签、v-text、v-html、v-bind 指令
pan_junbiao的博客
08-20 547
创建应用程序实例后，需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动进行更新。这样就无须手动获取 DOM 的值，使代码更加简洁，提高了开发效率。文本插值是数据绑定最基本的形式，使用的是双大括号标签。它会自动将绑定的事件实时显示出来。
Java学习Day32：HTML 第二章：黑风山
weixin_51721783的博客
08-20 978
我是儿子</a> <p> <a href="#">我是孙子
评论 66
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小周不摆烂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值