uni-app 中如何刷新页面

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

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

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

如何刷新页面

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

1. 使用缓存

   点击登录按钮之后，关键代码：

   // ...  
   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();  
       }  
   }  
   // ...  

   返回到个人中心页面，关键代码：

   // ...  
   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  
           };  
       }  
   }  
   // ...  

2. 使用 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 去实现类似功能。

完成示例，请下载附件。