我们在用 uni-app 开发前端时,有时在返回上一页后要刷新上一页的数据,如登录后返回上一页刷新登录状态。我们可以通过 uni.navigateBack 的成功回调函数来实现。具体实现方式如下:

要打开登录页面的主页面中的主要代码如下

<template>
    <view>
        <button class="cu-btn" @tap="toView('login/login')">登录</button>
    </view>
</template>

<script>
    export default {
        methods: {
            toView(page) {
                uni.navigateTo({
                    url: `/pages/${page}`
                })
            }
        },
        onLoad(option) {
            console.info('调用了 onLoad:' + option)
        }
    }
</script>

登录页面主要代码如下

<template>
    <view>
        <button class="cu-btn" @tap="handleLogin">立即登录</button>
    </view>
</template>

<script>
    export default {
        methods: {
            handleLogin() {
                const delta = 1 // 返回的页面数
                uni.navigateBack({
                    delta: delta,
                    success: () => {
                        const pages = getCurrentPages() // 获取当前页面栈数组,第一个元素为首页,最后一个元素为当前页面
                        let page = pages[Math.max(pages.length - 1 - delta, 0)] // 要返回到的页面,超过页面栈,则为首页
                        page.onLoad(page.options) // 通过调用页面的 onLoad 里面的处理逻辑实现刷新数据
                    }
                })
            }
        }
    }
</script>

注意:目前 uni.navigateBack官方文档 里没有体现 成功回调函数,但是经过实测是会回调,不知后续是否会变动。