导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-11-07 22:15
@applemiku:nonobig,看文章阅读数就能看出来
applemiku
2025-11-07 21:05
bigbig博客了!
广树管理员
2025-11-07 18:50
@ZeroCounter:是的,真的太棒啦
广树管理员
2025-11-07 18:50
@HelloGakki:海外ip似乎就看不到广告了
ZeroCounter
2025-11-07 18:18
按这个LLM编的取代萌娘百科指日可待!
攻略中
全民高尔夫环球之旅
暂无评分
Steam全民高尔夫环球之旅
2025年9月07日 12时 ~ 攻略中
已累计游玩2个月3天
《全民高尔夫 环球之旅》除了能体验到与过去作品相同的乐趣、爽快与深奥之外, 还有着以精美图像设计而成、个性丰富的角色们与以世界各地为主题的球场, 以及能让所有人热血沸腾的全新模式等等,是本系列的全新力作!
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩4个月15天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩5个月13天
全球累计销量超过50万份的“fault”系列最新作!故事的舞台是一个融合了奇幻与科幻的超前世界——卢森海德王国。本作讲述了生活在此地的一个平凡又平庸的究极普通市民——名为果子的少年的故事。
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

解决Ionic Vue生命周期钩子无法调用的问题

作者:广树时间:2021-05-23 17:03:02分类:JavaScript

在Ionic中,Vue的生命周期是被接管的。

因为Ionic对页面进行了缓存,所以每次页面只有第一次加载时才会触发Vue的生命周期,所以为了防止出现奇怪的问题,往往会用Ionic的生命周期,但是Ionic的生命周期问题也不少。

在Ionic中,有如下的生命周期

名称 描述
ionViewWillEnter
页面进入时触发
ionViewDidEnter
页面进入动画结束后触发
ionViewWillLeave
页面退出时触发
ionViewDidLeave
页面退出动画结束后触发

在经过一番测试之后发现一些很坑的设定。


1.在使用嵌套路由情况下

即Vue路由中使用了嵌套路由(点击查看文档

在这种情况下一般会有个Vue文件是主节点,如:

Home.vue


<div id="app">
  <router-view></router-view>
</div>


当然在Ionic中的写法是

Home.vue


<div id="app">
  <ion-router-outlet></ion-router-outlet>
</div>
此时神奇的事情发生了


ionViewWillEnter和ionViewDidEnter在子页面中是有效的,但是ionViewWillLeave和ionViewDidLeave只会在上面提到的Home.vue中触发。


2.使用了组件

上面Ionic的4种生命周期,在子组件中是都不会触发的。


解决方法:

目前为了解决这些不稳定因素,这边使用了watch $router 来解决


 watch: {
    $route() {
      if (this.$route.name === 'ViewName') {
        //如果切换的路由的Name为当前页面的Name时执行,即进入了页面
      }else{
        //如果不是时执行,即离开了页面
      }
    }
  },


donate.png


telegram banner (1).png


1210 x 50(蓝底).png

cloudcone