uniapp返回页面不会刷新

1. 问题背景

在使用uniapp开发移动应用时，开发者可能会遇到一个问题：返回上一个页面后，页面内容没有刷新。

2. 问题原因

2.1 uniapp生命周期

对于uniapp应用开发，每个页面都有自己的生命周期。其中，当页面进入时，会触发生命周期函数onLoad；当页面展示时，会触发生命周期函数onShow；当页面离开时，会触发生命周期函数onHide。

在返回上一个页面时，会调用生命周期函数onHide，而不会再次调用onLoad和onShow函数。因此，如果需要在返回页面后刷新内容，需要在onShow函数中实现刷新逻辑。

2.2 缓存机制

uniapp在跳转页面时，会默认缓存当前页面的状态。如果在返回页面时，没有使用uniapp提供的navigateBack或redirectTo方法进行跳转，而是通过浏览器的返回按钮或手势返回，会导致缓存的状态被再次展示，而不会重新请求数据刷新页面内容。

3. 解决方法

3.1 利用vuex

vuex是一种vue.js的状态管理模式。利用vuex可以在应用中集中管理和控制各个组件的状态。在uniapp中，也可以使用vuex来实现状态的共享和管理。

可以在vuex中定义一个全局的数据状态，用于存储需要在多个页面之间共享的数据，然后在onShow函数中从vuex中获取最新的数据。

// 定义一个全局的vuex仓库
const store = new Vuex.Store({
  state: {
    list: []
  },
  mutations: {
    SET_LIST: (state, list) => {
      state.list = list
    }
  },
  actions: {
    // 获取列表数据
    getList({ commit }) {
      return new Promise(resolve => {
        setTimeout(() => {
          const list = ['数据1', '数据2', '数据3']
          commit('SET_LIST', list)
          resolve()
        }, 1000)
      })
    }
  }
})
// 在需要使用数据的页面中，从vuex中获取数据
export default {
  onShow() {
    this.list = this.$store.state.list
  }
}

3.2 使用uniapp提供的方法

uniapp提供了两个用于跳转页面的方法：navigateBack和redirectTo。在使用这两个方法时，会自动清除当前页面的缓存状态，重新加载页面内容。

其中，navigateBack方法可以返回到上一个页面，而redirectTo方法则是跳转到一个新的页面。

// 在需要返回页面时，使用navigateBack方法
uni.navigateBack({
  delta: 1
})
// 在需要跳转页面时，使用redirectTo方法
uni.redirectTo({
  url: '/pages/login/login'
})

4. 总结

在uniapp开发中，返回页面不刷新的问题是比较常见的。造成这个问题的原因主要包括uniapp的生命周期和缓存机制。解决该问题的方法主要包括利用vuex实现数据的共享和管理，以及使用uniapp提供的navigateBack和redirectTo方法跳转页面。