uniapp返回上一页面并刷新数据 及 刷新当前页面

发布时间 2023-10-17 10:57:11作者: 以德为先

返回上一页面并onLoad刷新数据

//当前页面(详情页)
methods: {
    setNavTitle() {
       uni.setNavigationBarTitle({
          title: '标题'
       });
    },
    back() {
       uni.$emit('refreshData');
       // uni.$emit('refreshData','可传入参数');
       // uni.navigateBack({
       //     delta: 1, //返回的页面数,如果为1表示返回上一页
       //     success: function () {
       //        console.log('返回上一页并刷新数据成功');
       //     }
       // });
    }
},
onUnload() {
    this.back();
},
//获取前一个页面跳转过来的参数
onLoad(options) {
    //this.id= options.id;
    //console.log('onLoad');
    this.setNavTitle();
}

//这是返回到哪个页面就使用这个方法控制刷新
//返回上一页面中  uniapp在onLoad方法  vue在mounted 或 created中执行
onLoad(options) {
    //this.id= options.id;
    //正常进入该页面的获取数据
    this.getData();
    //从详情页返回该页面的获取数据
    uni.$on('refreshData',() => {
        this.getData();
    });
    // uni.$on('refreshData', ('上页面传入的参数') => {
    //    this.getData();
   // });
},
methods:{
    getData() {
       // 请求数据接口
       ... ...
    }
}

刷新当前页面

//重新获取数据  从而刷新当前页面数据

执行完成后(){
  this.获取数据方法()
}

//强制刷新当前页面
this.$forceUpdate()

//刷新当前页面
this.$router.go(0)