[`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)