👨💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: uniapp踩坑指南
🔥 专栏介绍: 本专栏提供了uni-app开发过程中必不可少的组件和解决方案。本书详细介绍了各种常用组件的使用方法和技巧，以及如何应对uniapp开发中遇到的各种问题。
文章目录
- 场景
- 方法1：getCurrentPages
- 介绍
- 代码演示
- 报错not a function？请注意！！！
- 注意2：Android端执行之后报Cannot read property '$vm' of undefined
- 方法2 ：onshow
- 介绍
- 代码演示
- 缺点
场景
假设我们有A和B两个页面，A页面是一个列表，B页面是从A页面点击某个列表项进入的，当我们在B页面操作完之后，需要返回A页面，此时需要刷新A页面的数据。
方法1：getCurrentPages
介绍
在uni-app中，getCurrentPages()方法用于获取当前页面栈的实例数组。页面栈是指打开的页面的层级关系，当前页面在数组中的索引为pages.length - 1，上一页在数组中的索引为pages.length - 2，以此类推。
getCurrentPages()方法返回的是一个页面栈数组，数组中的每个元素都是一个页面实例，包含了页面的数据和方法。通过获取页面栈数组，我们可以根据索引获取到上一页的实例，然后可以调用上一页的方法或访问上一页的数据。
具体流程如下：
- 调用
getCurrentPages()方法获取当前页面栈的实例数组：
var pages = getCurrentPages();- 使用
pages.length - 2获取上一页的索引，然后通过pages[beforePage]获取上一页的实例：
var beforePage = pages[pages.length - 2];- 通过上一页的实例，可以访问上一页的数据和方法，例如：
beforePage.data // 可以访问上一页的数据beforePage.method() // 可以调用上一页的方法通过以上步骤，我们可以获取到上一页的实例，并进行相应的操作。这样就可以实现在当前页返回上一页并刷新数据的功能。
代码演示
- 在A页面的methods中，编写获取数据的逻辑。
<script>export default { data() { return { dataList: [] // A页面的数据列表 } }, methods: { getData() { // 发送请求获取数据，并更新dataList } }}</script>- 在A页面的列表项上添加点击事件，跳转到B页面，并传递需要的参数。
<template> <view> <!-- A页面的列表 --> <view v-for="(item, index) in dataList" :key="index" @click="goToB(item)"> <!-- 列表项的内容 --> </view> </view></template><script>export default { methods: { goToB(item) { uni.navigateTo({ url: '/pages/BPage?id=' + item.id // 跳转到B页面，并传递参数 }) } }}</script>- 在B页面中，完成相应的操作后，通过uni.navigateBack方法返回A页面。
<script>export default { methods: { goBack() { var pages = getCurrentPages(); var beforePage = pages[pages.length - 2]; uni.navigateBack({ success: function() { beforePage.getData(); } }); } }}</script>这样，当点击返回按钮时，会返回上一页并调用上一页的getData函数来刷新数据。
报错not a function？请注意！！！
在uni-app中是适配多端的,beforePage.getData();只在h5中有效，在app端和微信小程序端都会报错 getData not a function；
在APP端和微信小程序需要加上
beforePage.$vm.修改后完整的代码如下
var pages = getCurrentPages();var beforePage = pages[pages.length - 2];uni.navigateBack({ success: function() { // #ifdef H5 beforePage.getData() // #endif // #ifndef H5 beforePage.$vm.getData() // #endif }}); 注意2：Android端执行之后报Cannot read property ‘$vm’ of undefined
在完成代码编写后，保存并重新加载软件后，上一页已经不存在了。此时，只需要退出软件并重新进入即可解决问题。
方法2 ：onshow
介绍
onshow属于uni-app的页面生命周期: 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onshow是一个会重复触发的事件。a页面刚进入时，会触发a页面的onShow。从其他页面跳转或者返回a页面，会再次触发onShow。
代码演示
- 在A页面的onShow生命周期函数中，编写获取数据的逻辑。这样每次返回A页面时都会重新获取最新的数据。
<script>export default { data() { return { dataList: [] // A页面的数据列表 } }, onShow() { // 获取数据的逻辑，例如发送请求获取最新数据 this.getData() }, methods: { getData() { // 发送请求获取数据，并更新dataList } }}</script>- 在A页面的列表项上添加点击事件，跳转到B页面，并传递需要的参数。
<template> <view> <!-- A页面的列表 --> <view v-for="(item, index) in dataList" :key="index" @click="goToB(item)"> <!-- 列表项的内容 --> </view> </view></template><script>export default { methods: { goToB(item) { uni.navigateTo({ url: '/pages/BPage?id=' + item.id // 跳转到B页面，并传递参数 }) } }}</script>- 在B页面中，完成相应的操作后，通过uni.navigateBack方法返回A页面。
<script>export default { methods: { goBack() { // 完成操作后返回A页面 uni.navigateBack({ delta: 1 // 返回的页面数，如果是返回上一级页面，delta为1 }) } }}</script>- 在A页面的onShow生命周期函数中，重新获取数据，以刷新A页面的数据。
通过以上步骤，当从B页面返回A页面时，A页面的onShow生命周期函数会被触发，重新获取数据并刷新页面。这样就实现了从B页面返回A页面并刷新A页面数据的功能。
缺点
虽然onShow生命周期函数在实现从B页面返回A页面并刷新数据的功能时非常方便，但也存在一些缺点：
-
不适用于首次加载：onShow生命周期函数在页面每次显示时都会触发，包括首次加载和从其他页面返回。如果A页面是首次加载时需要获取数据，onShow生命周期函数会在每次返回A页面时都触发获取数据的逻辑，导致数据重复获取和页面重复刷新。
-
无法传递参数：onShow生命周期函数没有参数传递的机制，无法在返回A页面时传递参数给onShow函数，因此无法根据传递的参数来决定是否需要刷新数据，或者刷新哪些数据。
-
页面切换时性能开销：在返回A页面时，onShow生命周期函数会被触发，这可能会导致页面在切换时出现短暂的卡顿或延迟，特别是当A页面的数据量较大或需要进行复杂的数据处理时。
-
无法精确控制刷新时机：onShow生命周期函数的触发时机是在页面显示时，无法精确控制刷新数据的时机。如果需要在B页面完成某个操作后立即刷新A页面的数据，使用onShow生命周期函数无法满足需求。
综上所述，虽然onShow生命周期函数在一些简单的场景下可以方便地实现从B页面返回A页面并刷新数据，但在复杂的场景下可能存在一些缺点和不足。在实际开发中，可以根据具体需求选择合适的数据刷新方案，例如使用事件总线、vuex等来进行数据传递和管理，或者使用自定义的生命周期函数来实现更精确的控制。