[`keep-alive--uniapp`](https://uniapp.dcloud.io/component/vue-component.html) uniapp的`keep-alive`只支持H5，所以，我们应该实现页面缓存呢 [](https://img2022.cnblogs.com/blog/1987782/202204/1987782-20220417134703975-160764696.png) **实现思路** 1.在`tab`每个选项增加两个值：`v-if`和`v-show`，`if`控制组件是否需要渲染，`show`控制组件`display` 2.初始化时候设置首页的`if``true`，其它都为`false`；`show`根据页面索引动态显示 3.当我们切换时:把上一个`tab`页面的`show`改为`false`,然后把当前要切换页面的`tab`数据中的`v-if`和`v-show`都变为`true` 注意：每个页面的`v-if`只改变一次，只有`初次加载页面`的时候，从`false`设置为`true`后就不会改变 **示例** ~~~html <!-- 只做示范，不能直接复制运行 --> <template> <view> <mhome v-if="tar[0]" v-show="index=='0'" ></mhome> <punchcard v-if="tar[1]" v-show="index=='1'"></punchcard> <navigation v-if="tar[2]" v-show="index=='2'"></navigation> <mycenter v-if="tar[3]" v-show="index=='3'"></mycenter> <u-tabbar :value="index" @change="change"> <u-tabbar-item name="0" text="首页" icon="home"></u-tabbar-item> <u-tabbar-item name="1" text="打卡" icon="map"></u-tabbar-item> <u-tabbar-item name="2" text="导航" icon="hourglass"></u-tabbar-item> <u-tabbar-item name="3" text="我的" icon="account"></u-tabbar-item> </u-tabbar> </view> </template> <script> import ... // 略 export default { data() { return { index: "0", tar:[true,false,false,false] } }, components: { mhome, mycenter, punchcard, navigation, }, methods: { change(e) { // 这里e是页面索引，返回来的是字符串类型的 this.index = e; this.tar[parseInt(e)]=true; } } } </script> ~~~ **效果展示** [](https://img2022.cnblogs.com/blog/1987782/202204/1987782-20220417150818973-63881864.gif)