导航

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

侧边栏
热门文章
1推文
飞猪说这一班飞机没有餐食,结果特意吃饱了上飞机,结果突然端出来量大管饱的飞机餐我都懵了。 这是一条来自高空的推文。
热度
506
2推文
酒店免费把我的双人床升级成了2张双人床!空间是大了许多,但是1个住有些浪费呀。
热度
505
3页面
程序员老黄历&求签
热度
299
4推文
抵达台北开始6天5夜的台湾之旅!
热度
206
5博文
探访《蜡笔小新》老家——春日部游记
热度
91
6博文
《孤独摇滚》圣地巡礼——下北泽&下北泽咖喱节2023
热度
91
7推文
《苍之彼方的四重奏 10th Anniversary Box》预计2025年3月28日发售,售价为含税19800日元(约922人民币)。 其中如果购买了sprite LIMITED EDITION或FILMIC EDITION版的话,还有机会将名字(猜测)登在结尾字幕中! sprite LIMITED EDITION版售价39800日元(约1853人民币),FILMIC EDITION版售价149800日元(约6973人民币)。 感觉如果花1853人民币就能把"维基萌"打在游戏结尾字幕中也似乎不错的样子?🤔 《苍之彼方的四重奏 10th Anniversary Box》专题页面:https://sprite.net/aokana/10thanniversary/box
热度
78
8推文
又到了日本5月黄金周的时期了。 去年的黄金周去了秩父和长瀞,今年的黄金周决定去一个远一点的地方,去一个不在日本国内的地方。
热度
65
9推文
最新一集的《mono女孩》里的《摇曳露营△》彩蛋真的太多啦!
热度
65
10推文
添加了上周看剧场版《名侦探柯南 独眼的残像》的观后感。
热度
52
最新评论
广树管理员
2025-04-29 22:48
@夕阳西下:哈哈哈,是这么操作的
夕阳西下
2025-04-29 22:46
一个睡觉,另外一个放衣服
广树管理员
2025-04-29 21:37
@Zrzzz:期待第四季的摇曳露营吧
广树管理员
2025-04-29 21:37
@mikusa:哈哈哈,确实有点出戏
广树管理员
2025-04-29 21:37
@ZeroCounter:是吗?真的被飞机的量吓到了。2块面包,1盒咖喱米饭,1碗沙拉,1碗水果,1杯茶,1杯水。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月6天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
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

1210 x 50(蓝底).png

cloudcone