uni-app 返回上一页或返回多页后刷新页面

我们在用 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 - delta, 0)] // 要返回到的页面，超过页面栈，则为首页
                        page.onLoad(page.options) // 通过调用页面的 onLoad 里面的处理逻辑实现刷新数据
                    }
                })
            }
        }
    }
</script>

版权属于：瞭月

本文链接：https://www.lervor.com/archives/177/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。