曾经有一个业务需求，关于vuekeep-alive组件缓存

我的业务需求是有订单列表A，订单详情页B和其他页面C。简单来说就是从订单详情页B进入订单列表页A，订单列表页需要缓存（因为有过滤条件），而其他页面将不会被缓存。很简单，vue不是有keep-alive吗？判断一开始是这样的router-viewv-if="!this.$route.meta.keepAlive">-->然后在路由页面的order_list中设置meta:{keepAlive:false}最后写一个routeguard在orderDetailbeforeRouteLeave(to,from,next){if(to.name=='order_list'){to.meta.keepAlive=true}}SoEazy!!!但事情远没有那么简单测试发现，第一次进入组件，第二次就不会缓存了。这到底是什么？3.0并且我在创建项目的时候选择了vuex。如果没有就新建一个和views同级的文件夹存储，下面新建一个index.js写vuex存储。我的vuex就像这样importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{catchList:[]},mutations:{keepAlive(state,component){!state.catchList.includes(component)&&state.catchList.push(component)},noKeepAlive(state){state.catchList=[]}},actions:{},modules:{}})如果你是构建项目选择vuex，就不需要在main.js中引入。如果没有，在main.js中添加Importstorefrom'./store'newVue({router,store,render:h=>h(App)})。$mount('#app')ok接下来，我将实现我的逻辑。其实我的逻辑完全是按照那位老者的方法，只是有一些变化。为了更清楚，我把App.vue页面的完整流程记录下来。include表示包含这个名字的组件会被缓存起来（这里注意要写组件的名字，不是路由的名字，而是exportdefault下的名字)对应exclude，我这里绑定的是vuex中的catchList，首先把它加入到你的全局路由守卫中，记住是全局的，我写在main.js里面了if(to.name==="order_list"){store.commit('keepAlive','order_list')next()}这个代码不应该很难理解，如果我进入order_list页面，将keepAlive和name提交到vuex数组就相当于把组件加入缓存，但是业务需求是我从进入order列表时只缓存其他页面订单详情页，因为router本身有routingguards，所以我就写在这里importstorefrom'../store/index.js'//introducevuex{path:'/order_list',name:'order_list',component:orderList,meta:{keepAlive:false},beforeEnter:(to,from,next)=>{if(from.name!='orderDetail'){console.log(from.name)store.commit("noKeepAlive")next()}else{next()}}}，这里的逻辑是在离开orderList之前判断，如果不是来自订单详情页，那么catchList会被清空，相当于不缓存ok，到这里测试基本ok了，第一次进入缓存但是又出现了新的问题。这些页面的底部有一个标签栏，相当于页脚。当我从其他页面进入订单列表页面，进入订单详情页面，再返回订单详情页面时，发现tabbar选择的选项是我从上一页的选项，比如我从首页进入订单列表，从订单详情页返回，tabbar会显示首页，这让我很不爽。起初我认为这是一种愚蠢的方式。我在每个条目order_list和Submit'noKeepAlive'中添加了一个路由守卫，但尝试了它但没有用。我尝试销毁重载的组件和其他方法。最后，我意识到缓存组件也有一个钩子。请注意，缓存的组件不遵循正常的创建挂钩集，但它已激活。deactivated和deactivated这两个钩子应该在activated中操作activated(){console.log('我已经被缓存但是我还想做点什么')this.active=1}这里需要注意的是这里写的在单独的标签栏组件中active是tabbar绑定的下标，我直接让他写成订单列表的下标