导航

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

侧边栏
热门文章
1推文
悲报,我的全景相机被大风击毁了。
热度
338
2推文
《憧憬成为魔法少女》突然爆料今天日本时间18点要来个大的,还以为是要出第二季了,结果是要出感谢祭。 从目前公开的情报来看,内容应该是包含朗读剧、脱口秀、演唱会。内容还是非常丰富的呢! 时间在2024年10月5日(周六),分15点S场(日场),18点M场(月场)。所以标题里的S和M是指SUN和MOON是吧😅。 票价为三档,前排加特典的13200日元档(约613人民币)、带特典的12100日元当(约562人民币)、普通的8800日元档(约408人民币)。明显感受到今年的活动,票价都上涨了好多。 抽选在7月19日(周五)开始。 专题页面:http://mahoako-anime.com/special.html 抽票页面:https://eplus.jp/sf/detail/4147670001-P0030001?P6=001&P1=0402&P59=1
热度
338
3博文
探访《蜡笔小新》老家——春日部游记
热度
182
4页面
程序员老黄历&求签
热度
143
5博文
初见台湾:台湾六日游 day1 从东京到台中
热度
130
6博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
117
7页面
关于
热度
117
8推文
今日秋叶原,是和aquaplus联动呢!商场内的白色相簿的曲子也非常令人怀念。
热度
103
9博文
面码找到你了!探寻超平和Busters的秘密基地——《我们仍未知道那天所看见的花的名字》秩父圣地巡礼
热度
91
10页面
友链
热度
91
最新评论
广树管理员
2025-05-05 16:19
@全局变量:也不稀奇,很多人还是认为 nodejs 是前端。
广树管理员
2025-05-05 16:17
@全局变量:大佬收?
全局变量
2025-05-05 12:15
我这个老程序员在2016年接触过nodejs,那时候有个项目前台网站就是用的nodejs,但网站的api数据来源当时的技术主管让我们用asp.net写,我属实弄不懂这叫哪门子nodejs。
全局变量
2025-05-05 12:12
快点让我来抢救一下。
广树管理员
2025-05-05 11:25
@ZeroCounter:啊?哪里思乡了?
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月12天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
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