前端知识点---路由模式-实例模式和单例模式(ts)

在 ArkTS(Ark UI 框架)中,路由实例模式(Standard Instance Mode)主要用于管理页面跳转。当创建一个新页面时,可以选择标准实例模式(Standard Mode)或单实例模式(Single Mode)。

路由实例模式

  1. 标准实例模式(Standard Mode)

    每次跳转都会创建一个新的页面实例。

    适用于 允许用户打开多个相同页面的情况。

    不会复用已有的页面实例,每次跳转都会创建新的页面实例,用户返回时可以看到之前的页面状态。

  2. 单实例模式(Singleton Mode)

    相同的页面始终只有一个实例,不会创建多个副本。

    适用于 同一个页面不需要重复创建的情况,比如 设置页面。

    如何在 ArkTS 中创建一个新页面(标准实例模式)

    使用 router.pushUrl() 进行页面跳转时,默认采用 标准实例模式。

示例:创建并跳转到新页面

步骤 1:创建 PageA 页面

ts 复制代码
@Entry
@Component
struct PageA {
  build() {
    Column() {
      Text('这是 PageA')
      Button('跳转到 PageB')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/PageB',  // 指定要跳转的页面路径
            mode: RouterMode.Standard  // 使用标准实例模式
          })
        })
    }
  }
}

步骤 2:创建 PageB 页面

ts 复制代码
@Entry
@Component
struct PageB {
  build() {
    Column() {
      Text('这是 PageB')
    }
  }
}

详细解析

  1. router.pushUrl()

    url: 'pages/PageB' → 指定跳转的目标页面。

    mode: RouterMode.Standard → 使用标准实例模式,每次跳转都会创建新的 PageB 实例。

  2. 什么时候使用标准实例模式?

    适用于需要创建多个相同页面实例的场景

    例如:新闻详情页,每次打开不同的新闻都会创建新的实例。

    例如:表单页面,每次填写新表单都会创建新的实例。

    单实例模式(仅创建一个页面实例)

    如果希望同一个页面只创建一个实例,可以使用 单实例模式:

ts 复制代码
router.pushUrl({
  url: 'pages/PageB',
  mode: RouterMode.Single  // 只创建一个实例
})

如果页面已经存在,则不会重新创建,而是直接返回已有页面。

总结

相关推荐
熊猫钓鱼>_>11 小时前
开源鸿蒙平台 KMP 三方库 Essenty 适配全流程:从生命周期抽象到状态重建验证
华为·开源·harmonyos·鸿蒙·kmp·atomgit·essenty
轻口味18 小时前
HarmonyOS 7 新特性5:平行视界——轻视界文集的两栏阅读与窗口状态边界矩阵真机实测
华为·矩阵·harmonyos·鸿蒙·平行视界
轻口味1 天前
HarmonyOS 7 新特性3:TiledGSNode——轻带看让 71MB 庭院按视口按需加载:真机实测与零请求降级
华为·harmonyos·鸿蒙·tiledgsnode
2501_919749031 天前
华为鸿蒙免费主题壁纸工具—小羊免费壁纸
华为·harmonyos·鸿蒙
m0_738185822 天前
Flutter 鸿蒙化实战:flutter_app_minimizer_plus 适配 OpenHarmony,一键最小化应用
flutter·华为·harmonyos·鸿蒙
m0_738185822 天前
Flutter 鸿蒙化实战:flutter_app_badger 适配 OpenHarmony,应用角标
flutter·华为·harmonyos·鸿蒙
轻口味2 天前
HarmonyOS 7 新特性2:音频编创——轻音台里的降噪、环绕与格式转换
华为·音视频·harmonyos·鸿蒙·音频编创
m0_738185822 天前
Flutter 鸿蒙化实战:flutter_blue_plus 适配 OpenHarmony,蓝牙扫描连接开箱即用
flutter·华为·harmonyos·鸿蒙
m0_738185822 天前
Flutter 鸿蒙化实战:flutter_background_service 适配 OpenHarmony,后台服务
flutter·华为·harmonyos·鸿蒙
行者-全栈开发2 天前
华为云码道 CodeArts 实测:让 AI 独立开发一个鸿蒙原生专注计时应用「刻循」
harmonyos·arkts·鸿蒙·ai 编程·华为云码道·codearts 代码智能体·专注计时