ionic vue 开发app 页面跳转后列表刷新

Posted 2022-01-26 Tenyearsme

ionic vue3 app 开发

场景直现

从页面A进入页面B，页面B进行操作后会影响页面A数据，此时返回A页面，页面数据没有重新加载

参考生命周期官方文档

使用vue的 onMounted 并不能保证每次 返回上一页的时候列表数据刷新。

import 
  IonPage,
  onIonViewWillEnter,
  onIonViewDidEnter,
  onIonViewWillLeave,
  onIonViewDidLeave
 from '@ionic/vue';
import  defineComponent  from 'vue';

export default defineComponent(
  name: 'Home',
  components: 
    IonPage
  ,
  setup() 
    onIonViewDidEnter(() => 
      console.log('Home page did enter');
    );

    onIonViewDidLeave(() => 
      console.log('Home page did leave');
    );

    onIonViewWillEnter(() => 
      console.log('Home page will enter');
    );

    onIonViewWillLeave(() => 
      console.log('Home page will leave');
    );
  
)