uniapp (1)h5页面刷新之后路由栈丢失,刷新之后无法返回上一页的问题;(2)微信小程序返回上一页刷新数据,重新请求接口

文章探讨了在H5应用中遇到的路由栈丢失问题,提出两种解决方案:一种是利用uni.navigateBack结合getCurrentPages处理;另一种是采用uni-simple-router插件。对于微信小程序,当从详情页返回列表页需刷新数据时,可以通过调用前一个页面的初始化函数来实现数据的重新请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、h5页面刷新之后路由栈丢失,刷新之后无法返回上一页的问题

官网在 uni.navigateBack 里有讲到:

解决方法一:

goBack() {  
  let back = getCurrentPages();  
  if(back && back.length > 1) {  
    uni.navigateBack({  
      delta: 1  
    });  
  } else {  
    history.back();  
  }  
}

解决方法二:

使用 vue-router,推荐插件:uni-simple-router

 路由、拦截、最优雅解决方案 uni-simple-router - DCloud 插件市场

这个方法也试过了,当时是看着文档写的,但是出现一些奇奇怪怪的bug,建议文件里面的内容按着示例写:

示例:

uni-simple-router/examples/uni-simple-router2.0 at master · SilurianYang/uni-simple-router · GitHub

2、微信小程序返回上一页刷新数据,重新请求接口

 案例:“我的订单” 页面列表点击进入 “订单详情” 页面后,在 “订单详情” 修改内容后返回 “我的订单” 时,需要重新请求 “我的订单” 接口。

在 “我的订单” 页面定义一个初始化函数:

// 初始化数据,用于下一个页面返回页面时刷新数据
init() {
	this.list = []
	this.getList() // 请求接口的函数
},

在 “订单详情” 页面

confirm() {
	let pages = getCurrentPages(); // 获取当前页面
	let beforePage = pages[pages.length - 2]; // 上一个页面
	uni.navigateBack({
		delta: 1,
		success: function() {
			beforePage.$vm.init(); // 执行前一个页面的 init 来实现刷新
		}
	});
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值