uniapp 缓存页面如何实现

在 UniApp 中，可以通过以下几种方式实现页面缓存，提升用户体验和页面切换性能：

1. 使用 keep-alive 组件

• 在 pages.json 中配置需要缓存的页面，通过 "style" 中的 "mp-alipay" 或全局配置实现。
• 示例配置：

  {
    "pages": [
      {
        "path": "pages/index/index",
        "style": {
          "navigationBarTitleText": "首页",
          "mp-alipay": {
            "allowsBounceVertical": "NO",
            "transparentTitle": "always",
            "titlePenetrate": "YES"
          }
        }
      }
    ],
    "globalStyle": {
      "usingComponents": {
        "keep-alive": "/path/to/keep-alive" // 若使用自定义组件
      }
    }
  }
  

• 注意：UniApp 对 keep-alive 的支持有限，主要用于 H5 和小程序部分平台，需测试目标平台兼容性。

2. 页面栈管理

• 使用 uni.navigateTo 跳转时，页面默认入栈并可返回；结合 uni.redirectTo 避免堆栈过多。
• 通过 getCurrentPages() 获取页面栈，手动控制缓存逻辑。

3. 数据缓存（uni.setStorageSync）

• 在页面 onHide 时保存数据，onShow 时恢复数据，模拟缓存效果。
• 示例代码：

  export default {
    data() {
      return {
        formData: {}
      };
    },
    onHide() {
      // 页面隐藏时保存数据
      uni.setStorageSync('cachedPageData', this.formData);
    },
    onShow() {
      // 页面显示时恢复数据
      const cached = uni.getStorageSync('cachedPageData');
      if (cached) this.formData = cached;
    }
  };
  

4. 组件状态保持

• 使用 v-if 或 v-show 控制组件显示，结合全局状态管理（如 Vuex）维持数据。

注意事项：

• 平台差异：小程序和 H5 对页面缓存的支持不同，需针对性测试。
• 内存管理：避免缓存过多页面导致内存溢出，及时清理无用数据。
• 生命周期：合理使用 onLoad、onUnload 等生命周期，确保数据及时释放。

根据具体需求选择合适方案，通常推荐结合数据缓存和页面栈管理实现灵活缓存。