导航

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

侧边栏
最新评论
广树
2025-01-17 22:34
@石樱灯笼:不至于……性能还是符合换代要求。
石樱灯笼
2025-01-17 13:58
Nintendo Switch XL
广树
2025-01-17 11:59
@HelloGakki:看来大佬掌机模式用的多。我的switch 5年过去了,手柄依然好使
HelloGakki
2025-01-17 11:36
@广树:手头的这个其实掌机模式的时候手柄也有点晃。而2目前来看主机本体卡口金手指突出这么一截,按1代这个情况,容易晃断了。其实一代的手柄我自己买过3对,其中2对都自己修过换过排线,所以对老任这个设计着实担忧。
广树
2025-01-17 11:32
@HelloGakki:不知道为什么都在在意这个点,周围不是还有一圈吗?受力点应该不在中间。
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

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

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

在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{
        //如果不是时执行,即离开了页面
      }
    }
  },


#Ionic

donate.png

1210 x 50(蓝底).png

cloudcone