导航

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

侧边栏
热门文章
1博文
《摇曳露营△》十周年纪念展
热度
583
2页面
程序员老黄历&求签
热度
325
3推文
作为凉宫春日等人就读的“北高”的原型,其校园风景在动画中得以重现的兵库县立西宫北高等学校,将在2027年3月末以“西宫北高校”的名义关闭,并由“西宫苦乐园高校”接管。 一直以来,许多粉丝都将西宫北高作为凉宫春日的“圣地”来访问。虽然该校此前从未对外开放校内,但这次将首次举办校内公开企划! 在这次活动中,大家可以欣赏动画中出现的场景,并在校园内进行拍照留念等活动。 ※ 截至2025年11月14日,入场门票已全部售罄,且不会追加销售。请注意,未持有入场门票者将无法进入会场。
热度
273
4页面
友链
热度
78
5推文
昨晚的国际互联网经历了一场灾难。 维基萌也被波及到了呢!由于设置了站点检测,昨晚故障警报不停。 一开始还以为维基萌服务器又出问题了,结果一看居然是 Cloudflare ? 看起来是由于 CDN 运营商 Cloudflare 的故障。众多网络服务出现了无法访问的情况。 更要命的是,面板也同时出现故障导致无法临时切换解析地址。 就这样故障从日本时间将近晚上9点,一直持续到了晚上11点过后,维基萌的访问才安定下来。 事后看来是由于不正确的配置导致的此次灾难。具体可以看官方的报告。 https://blog.cloudflare.com/18-november-2025-outage/ 不得不说今年由于大厂的失误导致的互联网服务灾难是不是太多了一点?
热度
52
6博文
《泰拉瑞亚》1.4 突然无法拾取/捡取物品怎么办?
热度
52
7博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
52
8推文
えなるる~
热度
39
9推文
《Happy Sugar Life》的最后一件十周年商品八音盒也到啦! https://www.bilibili.com/video/BV1YRCVBNEig/
热度
39
10页面
游戏
热度
39
最新评论
广树管理员
2025-11-21 19:57
@石樱灯笼:那就少子老龄化吧
石樱灯笼
2025-11-21 13:13
@广树:这玩意叫少子化,不叫老龄化。
广树管理员
2025-11-20 22:03
虽然不是真正意义上的闭校。但是作为作品中的那所学校因为少子老龄化最后并校与更名,还是有些可惜的。 很想去,但是似乎知道的有些太迟了呢。
广树管理员
2025-11-20 11:26
@小彦:淡定,日本民众根本不关心这些
广树管理员
2025-11-20 11:26
@老张博客:是呀
攻略中
全民高尔夫环球之旅
暂无评分
Steam全民高尔夫环球之旅
2025年9月07日 12时 ~ 攻略中
已累计游玩2个月15天
《全民高尔夫 环球之旅》除了能体验到与过去作品相同的乐趣、爽快与深奥之外, 还有着以精美图像设计而成、个性丰富的角色们与以世界各地为主题的球场, 以及能让所有人热血沸腾的全新模式等等,是本系列的全新力作!
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩4个月28天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩5个月26天
全球累计销量超过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