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

导航

侧边栏

攻略中

暂无评分

NS节奏天国奇迹之星

2026年7月08日 20时 ~ 攻略中

已累计游玩1个月18天

《节奏天国：奇迹之星》是一款轻松又充满创意的音乐节奏游戏，玩家只需跟随音乐节拍按下按键，就能完成跳跃、敲击空罐、制作料理等各种有趣的小挑战。游戏延续了《节奏天国》系列简单易上手、节奏感强、画风幽默的特点，让玩家在一个个短小精巧的关卡中感受音乐与反应力结合的乐趣，适合喜欢节奏游戏和轻松休闲玩法的玩家体验。

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

#Ionic