虫雪浓
虫雪浓
  • 发布:2019-02-13 19:30
  • 更新:2021-06-17 16:56
  • 阅读:131602

uni-app 中如何刷新页面

分类:uni-app

我们知道 ,html重新加载页面有几种方式

  1. reload():强迫浏览器刷新当前页面 ;
  2. replace() :通过指定URL替换当前缓存在历史里(客户端)的项目 ;
  3. 添加标签<meta http-equiv="refresh" content="20"> : 页面自动刷新;

而在uni-app 中并没有页面重新加载和刷新当前页面的概念,所以接下来,告诉不会的同学 uni-app 中怎么刷新页面。

如何刷新页面

场景:从个人中心页面,进入登录页面。登录成功之后返回个人中心页面,个人中心页面数据进行相应的变化。

  1. 使用缓存

点击登录按钮之后,关键代码:

```js  
// ...  
methods: {  
	bindLogin(e) {  
		try {  
			uni.setStorageSync('login_key', {  
				avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
				token: 'user123456',  
				userName: '缓存登录用户',  
				login: true  
			});  
		} catch (e) {  
			// error  
		}  
		uni.navigateBack();  
	}  
}  
// ...  
```  

返回到个人中心页面,关键代码:  

```js  
// ...  
data(){  
	return {  
		storageData:{}  
	}  
},  
onShow: {  
	const loginKey = uni.getStorageSync('login_key');  
	  
	if (loginKey) {  
		console.log(loginKey);  
		this.storageData = {  
			avatarUrl: loginKey.avatarUrl,  
			login: loginKey.login,  
			userName: loginKey.userName  
		};  
	}  
}  
// ...  
```  
  1. 使用 vuex

    vuex 关键代码

    // ...  
    const store = new Vuex.Store({  
    	state: {  
    		login: false,  
    		token: '',  
    		avatarUrl: '',  
    		userName: ''  
    	},  
    	mutations: {  
    		login(state, provider) {  
    			state.login = true;  
    			state.token = provider.token;  
    			state.userName = provider.userName;  
    			state.avatarUrl = provider.avatarUrl;  
    		},  
    		logout(state) {  
    			state.login = false;  
    			state.token = '';  
    			state.userName = '';  
    			state.avatarUrl = '';  
    		}  
    	}  
    })  
    // ...  
    

    点击登录按钮之后,关键代码:

    import { mapMutations } from 'vuex';  
    // ...  
    methods: {  
    	bindLogin(e) {  
    
    		this.login({  
    			avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
    			token: 'user123456',  
    			userName: 'vuex登录用户'  
    		});  
    		uni.navigateBack();  
    	},  
    	...mapMutations(['login'])  
    }  
    // ...  
    

    返回到个人中心页面,关键代码:

    import { mapState } from 'vuex';  
    
    // ...  
    computed: {  
    	...mapState(['avatarUrl', 'login', 'userName'])  
    }  
    // ...  
    

关联阅读:uni-app 全局变量的几种实现方式

结语: 整体下来都没有什么难点的,推荐使用 vuex 去实现类似功能。

完成示例,请下载附件。

5 关注 分享
Trust Warn u***@163.com h***@qq.com 彼岸渡己

要回复文章请先登录注册

L***@hotmail.com

L***@hotmail.com

回复 CaesarHe :
我用这个方法为什么没用。。
2021-06-17 16:56
8***@qq.com

8***@qq.com

回复 发的王 :
因为你没考虑到其他场景,比如淘宝下单,选好商品之后,提交订单,检测到未登录,自动跳转到登录页面,登陆完之后当然是uni.navigateBack(); 回到下单页。同样的情况,比如你在设置页面,你想设置用户名,检测到未登录,自动跳转到登录页,登录之后依然uni.navigateBack(); 回到设置页面而不是回到下单页吧。所以这个时候uni.redirectTo(),就尴尬了。
2020-12-25 14:52
MonikaChen

MonikaChen

uni.Redirece会重新刷新
2020-11-30 19:28
s***@163.com

s***@163.com

回复 CaesarHe :
我用了,刷新不了啊
2020-11-30 11:09
1***@qq.com

1***@qq.com

回复 CaesarHe :
正常情况下个人中心页面就在tabbar页面,你用uni.redirectTo是跳转不到的,只能用uni.switchTab,这时候就只能用楼主的方法了
2020-11-24 11:04
1***@qq.com

1***@qq.com

回复 CaesarHe :
大佬在哪个里面写重定向呀 我想每次点击tab栏 当前页面就刷新 最好缓存也扔了
2020-09-03 10:27
lazi

lazi

回复 CaesarHe :
简单明了,
2020-07-28 10:01
C1oudust

C1oudust

回复 CaesarHe :
没毛病,直接重定向当前页就行了...
2020-07-17 15:39
发的王

发的王

回复 CaesarHe :
感觉楼主说了一大堆不如你这句话管用
2020-07-15 17:49
CaesarHe

CaesarHe

可以直接使用uni.redirectTo({url: '当前页面路径'}); 很简单就刷新了当前页面
2020-05-27 18:37