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

朱雀 2021-03-29 11:52 3948阅读 1赞

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

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

  1. <template>
  2.     <view>
  3.         <button class="cu-btn" @tap="toView('login/login')">登录</button>
  4.     </view>
  5. </template>
  7. <script>
  8.     export default {
  9.         methods: {
  10.             toView(page) {
  11.                 uni.navigateTo({
  12.                     url: `/pages/${page}`
  13.                 })
  14.             }
  15.         },
  16.         onLoad(option) {
  17.             console.info('调用了 onLoad：' + option)
  18.         }
  19.     }
  20. </script>

登录页面主要代码如下

  1. <template>
  2.     <view>
  3.         <button class="cu-btn" @tap="handleLogin">立即登录</button>
  4.     </view>
  5. </template>
  7. <script>
  8.     export default {
  9.         methods: {
  10.             handleLogin() {
  11.                 const delta = 1 // 返回的页面数
  12.                 uni.navigateBack({
  13.                     delta: delta,
  14.                     success: () => {
  15.                         const pages = getCurrentPages() // 获取当前页面栈数组，第一个元素为首页，最后一个元素为当前页面
  16.                         let page = pages[Math.max(pages.length - 1 - delta, 0)] // 要返回到的页面，超过页面栈，则为首页
  17.                         page.onLoad(page.options) // 通过调用页面的 onLoad 里面的处理逻辑实现刷新数据
  18.                     }
  19.                 })
  20.             }
  21.         }
  22.     }
  23. </script>

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

发表评论

表情：
评论列表 （有 1 条评论，3948人围观）
蒲公英云911B62
蒲公英云911B62V铁粉 2022-12-28 10:12
getCurrentPages报错 Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

相关阅读

    相关 mui返回上一页刷新

    mui中返回上一页并刷新，我只知道 2中方法，一种就是 mui.fire  至于用法在我其他文章里面有就不说了， 说一个比较简单的。 因为是返回上一页，所以只需要调用父类

    柔光的暖阳◎柔光的暖阳◎/ 1 赞/ 939 阅读