keep-alive的使用与销毁

项目中经常遇到以下情况，填写页面跳转到选择信息页面（eg：选择地址，选择证书），然后返回填写页面，在表格常量上填写信息。可以使用Vue内置的keep-alive缓存组件来实现以上功能。1.在App.vue中添加keep-alive在路由文件中，在需要缓存的页面添加meta{path:'/fillorder/:code',name:'fillorder',component:Fillorder,meta:{keepAlive:true,},},2.销毁上面的操作已经可以实现填充页面的缓存，但是之后不会改变页面加载一次重新请求数据，不符合我们的需求。我们希望在填表页面回到上一页再进入填表页面时，页面会重新加载。所以，我们先尝试组件中的路由守卫，改变页面的keepAlivebeforeRouteLeave(to,from,next){if(to.name==='selectAddr'){from.meta.keepAlive=true;}else{from.meta.keepAlive=false;}next();}，然后再次进入页面重新加载。但是，由于页面是用keepAlive:false进入的，所以会出现两个组件。但问题来了。此时跳转到地址选择页面，返回填表页面时，显示的填表页面是最后一个缓存，导致显示不正确。keep-alive并没有提供销毁包含组件的方法，但是我们可以通过比较hack来实现。函数removeKeepAliveCache(){if(this.$vnode&&this.$vnode.data.keepAlive&&this.$vnode.parent){consttag=this.$vnode.tag;letcaches=this.$vnode.parent.componentInstance.cache;letkeys=this.$vnode.parent.componentInstance.keys;for(let[key,cache]ofObject.entries(caches)){if(cache.tag===tag){if(keys.length>0&&keys.includes(key)){keys.splice(keys.索引（键），1）；}删除缓存[key];}}}this.$destroy();};然后，在组件Routeguard中调用removeKeepAliveCache，就不需要修改from.meta.keepAlivebeforeRouteLeave(to,from,next){if(to.name==='selectAddr'){//from.meta.keepAlive=真；}else{//from.meta.keepAlive=false;removeKeepAliveCache.call(this);}next();}，至此，我们一开始提到的需求就已经实现了，填写表单页面并跳转到选择地址页面，然后返回到了填写表单的时候，上面的信息表格保持不变。再次重新进入填表页面时，页面会刷新。