uniapp 返回上一级刷新页面

最新推荐文章于 2025-10-30 10:44:51 发布

原创最新推荐文章于 2025-10-30 10:44:51 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

文章介绍了三种在Vue应用中处理从A页面跳转到B页面后返回A页面时自动刷新数据的技术：1)在onShow生命周期函数中重新加载数据；2)使用uni.navigateBack配合事件更新A页；3)利用v-if条件渲染组件并触发数据更新。

在A页面点击跳转B页面，后返回到A页面要求A页面数据刷新

方法一：onShow

在onShow中再次调用需要刷新的数据

onShow() {
	this.方法名	   
},

方法二：uni.navigateBack()

A页面监听了一个名为refreshPage的事件，当B页面返回时，A页面会收到通知并执行刷新操作

这个方法也可以适用于当返回到A页面时需要传递参数

在A页面

onShow() {
  uni.$on('refreshPage', this.refreshPage);
},
onHide() {
  uni.$off('refreshPage', this.refreshPage);
},
methods: {
  refreshPage() {
    // 执行刷新操作
    this.loadData();
  },
  loadData() {
    // 加载数据的方法
  }
},

uni.navigateback({
    delta:1.
    success(){
      // 发送事件通知上一页更新数据
       uni.$emit('refreshPage', {});
})

方法三：v-if

这个方法适用于A页面使用了组件，从组件当中跳转到B页面

在A页面的整个页面的头部加上v-if

<div v-if="show">
这里是你页面要显示的东西
<div>

methods: {
        init() {
			this.show=false
			//这里写需要调用的数据
            this.UserLogin()
			setTimeout(()=>{
				this.show=true
			},50)
			
		},

uniapp 返回上一级 刷新页面

uniapp 返回上一级刷新页面