vue.js javascript typescript uniapp实现页面缓存（仿router-view回退上页）

技术栈：uniapp的vue3+vite2+ts版本 前言：最近一个需求，页面部分区域切换到新的组件页，返回时不需要重新请求，即有缓存，但是在uniapp中没有该功能，因为pages.json无法设置子路径，导致不能使用页面回退来访问页面缓存，所以同时使用v-if和v-show来完成缓存效果（uniapp中自带的只适用H5，此种方法适用多端，如微信小程序）

一、原理分析

通过v-if控制是否渲染，通过v-show控制是否显示，我是使用pinia进行状态储存，也可以通过vuex或组件间传参实现

二、页面逻辑

通过数组控制，数组里参数对应v-if和v-show，即对应如下[v-if, v-show]，组件B和组件C初始状态为[false, false]，例如组件A至B时[true, true]，即渲染加显示，同理，返回时改为[false, true]，即不渲染（改为[false, false]也可以，渲染都未渲染肯定未显示了）

三、缓存效果代码实现

我把业务中的代码提取出来简化后来展示效果，是否成功可以看控制台是否重新打印该页面提示，此处只贴状态管理和三个组件部分，基本上最重要的内容都包含进去了，文章末尾有demo项目，有区别之处请自行对照 stores/base.ts

import { defineStore } from 'pinia';

export const useBase = defineStore('base', {

state: () => {

return {

subunitBShow: [false, false], // 参数对应[v-if, v-show]

subunitCShow: [false, false], // 参数对应[v-if, v-show]

};

},

actions: {

setSubunitBShow(param: Array) {

this.subunitBShow = param

},

setSubunitCShow(param: Array) {

this.subunitCShow = param

}

},

});

subunitA.vue

subunitB.vue

subunitC.vue

四、参考链接地址

1、关于uniapp不支持router-view的讨论：https://ask.dcloud.net.cn/question/64581 2、示例参照一：http://www.manongjc.com/detail/29-bixynacatyhmfrr.html 3、示例参照二：https://blog.csdn.net/qq_41777791/article/details/104665170 4、v-show和v-if能否一起使用的问题：https://blog.csdn.net/yuan_xiaoxin/article/details/120988587 5、文章上述内容的demo案例，我放在了gitee上，有需要自行提取，若有用并且方便的话请收藏点赞一下，谢谢：https://gitee.com/zasulan/csdn-item/tree/master/uni-demo-item-vite

推荐阅读

 您阅读本篇文章共花了：