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

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

zonemu2个月前 (07-26)技术文章25

作者使用三方库@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修复成功。

相关文章

Vue3 中有哪些值得深究的知识点?(vue3例子)

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,...

jenkins+gitlab 实现自动化部署(gitlab触发jenkins)

目录1、安装jdk,要记住安装路径2、安装maven,要记住安装路径3、安装git,要记住安装路径4、安装gitlab5、安装jenkins(centos7)创建安装目录下载通用war包启动和关闭Je...

02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html1.结构元素 可以理解为语义话标记,比如:以前这么写<...

HTML5+眼球追踪?黑科技颠覆传统手机体验

今天,iH5工具推出一个新的神秘功能——眼动追踪,可以通过摄像头捕捉观众眼球活动!为了给大家具体演示该功能的使用,我做了一个案例,供大家参考。实际效果如下:案例比较简单,就是通过眼动功能获取视觉焦点位...

HTML5培训的学习大纲

第一阶段前端开发基础:1.HTML标签语言(xhtml+html5)行业介绍,本地环境配置,sublime编辑器学习使用,制作html标准模板,css基础,html常用标签(一),html常用标签(二...

聊城职院获省赛“HTML5交互融媒体内容设计与制作”赛项一等奖

11月25日,山东省职业院校技能大赛(高职组)“HTML5交互融媒体内容设计与制作”赛项在威海海洋职业学院学院圆满结束。学校信息工程系由计算机应用技术专业学生张慧、冯媛、王海阔三名学生组成的参赛团队,...