uni-admin 没有<router-view /> 如何加入<keep-alive>缓存技术

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

uni-admin 本身是一个后台管理项目，它并不是通过 <router-view /> 做前端路由，而是采用 uni-app 的页面栈机制（pages.json 配置）。因此，uni-admin 中无法直接使用 <keep-alive> 缓存页面组件，因为：

1. <keep-alive> 是 Vue 的抽象组件，仅对 Vue Router 的 <router-view /> 生效；
2. uni-app 的页面跳转是通过 uni.navigateTo、uni.redirectTo 等 API 实现的，页面是原生级别的切换，不是 Vue 组件级别的切换；
3. 官方文档也明确说明：<keep-alive> 在 App 端不支持，仅 H5 端支持（详见）。

可行的替代方案

✅ 方案一：使用 preloadPage 预加载页面（推荐）

uni-app 提供了 preloadPage API，可以在用户访问前提前加载页面资源，达到类似“缓存”的效果：

// 在需要预加载的地方调用  
uni.preloadPage({  
  url: '/pages/user/list'  
})

• 适用于 App 端（iOS/Android）；
• 不会缓存页面状态，但能显著提升页面打开速度；
• 官方文档

✅ 方案二：使用 uni.setStorageSync 缓存页面数据

如果是为了保留页面状态（如表单、列表滚动位置），可以手动缓存数据：

// 页面离开时缓存  
onHide() {  
  uni.setStorageSync('userListData', this.list)  
}  

// 页面显示时恢复  
onShow() {  
  const cache = uni.getStorageSync('userListData')  
  if (cache) this.list = cache  
}

❌ 不可行方案

• 使用 <keep-alive>：uni-admin 无 <router-view />，且 App 端不支持；
• 使用 vue-router：uni-app 默认不使用 vue-router，强行引入会破坏框架机制。

总结

如需更复杂的缓存机制，建议考虑将 uni-admin 改造为 H5 端独立部署，并使用 vue-router + <keep-alive>，但这已超出 uni-admin 官方设计范围。