广树
2024-12-01 18:10
@石樱灯笼:达拉然可还行
作者:广树时间: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{ //如果不是时执行,即离开了页面 } } },