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

Posted 2021-11-09 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');
    });
  }
})