当前位置:首页 > 技术文章 > 正文内容

鸿蒙NEXT-HMRouter,在使用router后无法跳转问题解决

zonemu1周前 (07-26)技术文章2

作者使用三方库@HMRouter,用来搭建鸿蒙的三层架构(基础特性层,产品定制层,公共能力层)完成App,跨包跳转的时候,在登录页进入首页的时候遇到了一个奇怪的Bug,在我们使用router.push()跳转后,然后再使用HMRouter突然就无法跳转页面了,那么我们该怎么办呢?,现在将该bug的解决方法分享出来。

错误示例代码如下所示:

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

@Entry
@ComponentV2
struct LoginPage {
  @State message: string = 'Hello World';
  aboutToAppear(): void {
    console.log('LifeCircle创建')
  }
  onDidBuild(): void {
    console.log('LifeCircle组件构建完成')
  }
  onPageShow(): void {
    console.log('页面-PageShow')
  }
  onPageHide(): void {
    console.log('页面-Page隐藏')
  }
  build() {
    Column(){
        /*登录页面代码省略**/
    }
    .onVisibleAreaChange([1.0],()=>{
        /**省略登录校验过程**/
      router.replaceUrl({url:'pages/Index'})
    })
  }
}

作者为了方便,当已经登录过了之后就直接在onVisibleAreaChange中直接登录跳转到首页去了,到了首页发现,使用HMRouter无法跳转到其他页面了,点击跳转按钮也没有任何反应。

分析错误原因:

onVisibleAreaChange 是高频触发的回调,若在此处直接跳转,可能因页面未完全初始化导致路由状态异常。(页面生命周期冲突)

解决方案:

避免在 onVisibleAreaChange 中直接跳转,改用显式触发(如按钮点击)或页面生命周期回调

例如下面示例代码所示:

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

@Entry
@Component
struct LoginPage{
  @State message: string = 'Hello World';
  aboutToAppear(): void {
    router.replaceUrl({url:'pages/Index'})
    console.log('LifeCircle创建')
  }
  onDidBuild(): void {
    console.log('LifeCircle组件构建完成')
  }
  onPageShow(): void {
    console.log('页面-PageShow')
  }
  onPageHide(): void {
    console.log('页面-Page隐藏')
  }
  build() {
    Column(){
    }
  }
}

在aboutToAppear中,进行我们的页面跳转即可。

实际结果:在页面生命周期回调中跳转到首页后,HMRouter,可以正常跳转页面。Bug修复成功。

相关文章

git的几种分支模式(git分支的概念)

编写代码,是软件开发交付过程的起点,发布上线,是开发工作完成的终点。代码分支模式贯穿了开发、集成和发布的整个过程,是工程师们最亲切的小伙伴。那如何根据自身的业务特点和团队规模来选择适合的分支模式呢?本...

10分钟搞定gitlab-ci自动化部署(gitlab ci 配置)

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布...

Windows 下 Git 拉 Gitlab 代码(gitlab拉项目)

读者提问:『阿常你好,Windows 下 Git 拉 Gitlab 代码的操作步骤可以分享一下吗?』阿常回答:好的,总共分为五个步骤。一、Windows 下安装 Git官网下载链接:https://g...

java调用API操作GitLab(java调用zabbix api)

最近需要在一个WEB项目中集成GitLab,用到了GitLab的API操作,在网上找了很久都是说直接调用GitLab的Http接口,而且API官方只有javadoc没有其它说明文档,特别记录下,以备查...

解决GitLab报错:not allowed to force push code to a protected branch

当 force push 代码的时候,可能会遇到如下错误:You are not allowed to force push code to a protected branch on this pr...

VIM配置整理(vim配置教程)

一、基本配色set number set showcmd set incsearch set expandtab set showcmd set history=400 set autoread se...