快捷導(dǎo)航

uniapp中刷新本頁面的三種方法

更新時間：2023年10月11日 15:54:46 作者：DC...

這篇文章主要給大家介紹了關(guān)于uniapp中刷新本頁面的三種方法,刷新頁面的具體邏輯可以根據(jù)實際需求進行編寫,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

方法一

利用路由，強制uniapp刷新當(dāng)前頁面

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

方法二

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某給頁面（如果想刷新當(dāng)前頁面也可以使用該方法）：

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

還可用定時器來對該方法進行優(yōu)化，使其稍微延緩動畫

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

方法三

通過獲取該頁面實例執(zhí)行其內(nèi)部的生命周期方法來刷新頁面

    reload() {
        // 頁面重載
        const pages = getCurrentPages()
        // 聲明一個pages使用getCurrentPages方法
        const curPage = pages[pages.length - 1]
        // 聲明一個當(dāng)前頁面
        curPage.onLoad(curPage.options) // 傳入?yún)?shù)
        curPage.onShow()
        curPage.onReady()
        // 執(zhí)行刷新
    },

補充：uniapp如何根據(jù)路由手動onload刷新某一個頁面

uniapp如何手動刷新要跳轉(zhuǎn)到的頁面？相信很多人百度查到的答案都是如下：

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

但是在我做的項目中，會出現(xiàn)莫名的bug，pop出來的頁面不是想要的，而且后面修改頁面跳轉(zhuǎn)的時候可能要修改代碼，根據(jù)頁面棧pop出來頁面刷新很難定位刷新到我們想要的頁面。那么有沒有什么辦法可以根據(jù)路由定位到我們要刷新的頁面呢，根據(jù)官方api，我們可以獲取已渲染加載的頁面數(shù)組let pages = getCurrentPages（），同時每一個頁面都有page.route（）獲取該頁面的路由。所有我們只要遍歷已渲染加載的pages，再比較pages里面的路由在調(diào)用相應(yīng)頁面的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)
					}
				}
			})