uni-app中如何刷新页面

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

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

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

如何刷新页面

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

使用缓存

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

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

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

完成示例，请下载附件。

ionicwang 1楼•1 天前

在uni-app中，刷新页面的操作通常用于重新加载当前页面的数据或恢复页面到初始状态。虽然uni-app没有直接的API像Web中的location.reload()来刷新页面，但你可以通过一些方法来实现类似的效果。以下是几种常用的方法及其代码示例：

方法一：使用`navigateTo`和`redirectTo`结合

你可以先导航到一个临时页面，然后立即重定向回当前页面，这样可以实现页面的刷新。不过这种方法可能会导致页面闪烁，不推荐频繁使用。

// 假设当前页面路径为 /pages/index/index
uni.navigateTo({
    url: '/pages/temp/temp?refresh=true', // 临时页面
    success: function () {
        setTimeout(() => {
            uni.redirectTo({
                url: '/pages/index/index' // 重定向回当前页面
            });
        }, 0);
    }
});

在temp页面中，你可以什么都不做，或者仅仅作为中转站。

方法二：重新加载数据

如果只是需要刷新页面数据，可以直接调用获取数据的函数，而不必刷新整个页面。

// 假设你有一个获取数据的函数 fetchData
function fetchData() {
    uni.request({
        url: 'https://api.example.com/data',
        success: (res) => {
            this.setData({
                dataList: res.data
            });
        }
    });
}

// 在需要刷新数据的地方调用 fetchData
fetchData.call(this);

方法三：使用页面生命周期函数

在页面的onShow生命周期函数中重新加载数据，每当页面显示时都会触发这个函数。

Page({
    data: {
        dataList: []
    },
    onLoad: function () {
        this.fetchData();
    },
    onShow: function () {
        // 可以在这里判断是否真的需要刷新数据，比如通过时间戳等条件
        this.fetchData();
    },
    fetchData: function () {
        uni.request({
            url: 'https://api.example.com/data',
            success: (res) => {
                this.setData({
                    dataList: res.data
                });
            }
        });
    }
});

方法四：使用`reLaunch`

uni.reLaunch可以关闭所有非 tabBar 页面，打开到 tabBar 页面，并重新加载该页面。这个方法会重置整个应用的页面栈。

uni.reLaunch({
    url: '/pages/index/index' // 重新加载首页
});

根据具体需求选择合适的方法。通常推荐方法二和方法三，因为它们不会引起页面闪烁，且能更好地管理数据状态。