uniapp中刷新本页面的三种方法

作者:清欢时间:2026-10-31 06:59:08浏览:451

本文介绍uniapp中刷新当前页面的三种常用方法。第一种通过路由强制刷新;第二种利用关闭当前页并跳转至目标页实现,可配合定时器优化动画;第三种通过获取页面实例并手动执行生命周期方法重载。此外,还探讨了如何根据路由精准定位并刷新指定页面,解决传统pop方式难以定位的问题。

方法一

利用路由机制,强制uniapp刷新当前页面。

setTimeout(() => {
	this.$router.go(0)
}, 500)

方法二

关闭当前页面,并跳转到应用内的指定页面(若需刷新当前页面,也可采用此方式):

uni.redirectTo({
    url: '../details/details?gid=' + this.gid //写你的路径
});

可结合定时器对该方法进行优化,使动画效果略微延迟,提升用户体验。

setTimeout( () => {
    uni.redirectTo({
       url: '../details/details?gid=' + this.gid
    });	
}, 500)

方法三

通过获取当前页面实例,并执行其内部的生命周期方法来实现页面刷新。

    reload() {
        // 页面重载
        const pages = getCurrentPages()
        // 声明一个pages使用getCurrentPages方法
        const curPage = pages[pages.length - 1]
        // 声明一个当前页面
        curPage.onLoad(curPage.options) // 传入参数
        curPage.onShow()
        curPage.onReady()
        // 执行刷新
    },

补充:uniapp如何根据路由手动onload刷新某一个页面

关于uniapp如何手动刷新要跳转到的页面,网络上常见的答案通常如下:

uni.switchTab({
  url: '/pages/user/user',
  success(){
	     let page = getCurrentPages().pop(); //跳转页面成功之后
             if (!page) return;  
             page.onLoad(); //重新刷新页面
	  }
});

但在实际项目中,这种方法可能会引发莫名的bug,例如弹出的页面并非预期结果。且在后续修改页面跳转逻辑时,代码维护成本较高,通过页面栈pop方式难以精准定位需要刷新的页面。那么,是否存在一种可以根据路由直接定位并刷新目标页面的方法?根据官方API,我们可以获取已渲染加载的页面数组let pages = getCurrentPages(),同时每个页面都拥有page.route()方法以获取该页面的路由信息。因此,只需遍历已渲染加载的pages数组,比对其中的路由,并调用相应页面的onload事件即可实现刷新,代码如下:

uni.switchTab({
				url : '/pages/test/test',
				success() {
					let pages = getCurrentPages();
					for(let i = 0; i < pages.length; i ++){
						let tmppg = pages[i];
						if(tmppg.route == "pages/test/test"){
							tmppg.onLoad();
						}
						// console.log('tmppg:' + tmppg)
						// console.log('tmppg.route:' + tmppg.route)
					}
				}
			})

总结

到此这篇关于uniapp中刷新本页面的三种方法的文章就介绍到这了,更多相关uniapp刷新本页面内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章