需求分析后台：1、数据列表页，滚动加载数据；2、在多条数据的情况下，点击某一项进入详细页面进行编辑（修改、删除）操作；3.保存并返回上一页；在上述情况下，我想保留上次浏览位置，保持数据最新；解决方案1、原方案：点击详情页时，记住浏览位置，传参或者保存到本地缓存，然后点击详情页操作完成，返回时，路由守卫可以判断详情页是否已经跳回，然后让页面滚动到上次记录的位置；思路是这样的，实际操作起来很麻烦；2、推荐方法：使用vue动态组件keep-alive，在RouteLeave之前加上routeguard函数，激活hook函数；hook函数的执行顺序和功能的详细说明，请参考vue组件生命周期步骤详解。我的步骤是按照开发思路进行的，场景是从商品列表页——>商品详情页——>商品列表（数据缓存）；开发前看到网上很多人在路由文件里配置了meta:{keepAlive:true}，但是我觉得没必要，因为列表页并不总是需要缓存数据的，如果你输入from首页，不需要，可以在路由守卫函数中判断是否需要缓存数据；下面的代码使用list.vue来表示列表页面；detail.vue代表详情页；场景一：点击返回判断路由跳转是否为需要缓存的列表页：detail.vuebeforeRouteLeave(to,from,next){if(to.name==='M2mBoard'){to.meta.keepAlive=true}next()}由于keepAlive是vue2.0内置的组件，可以通过设置页面路由meta.keepAlive=true来缓存数据，路由跳转使用函数this.$router.go(-1);可以显示在上次浏览记录的位置；场景二：编辑详情页数据返回列表页，需要将修改后的数据保存到本地，然后在列表页的缓存数据中更改显示：detail.vuebeforeRouteLeave(to,from,next){if(to.name==='M2mBoard'){to.meta.keepAlive=true}if(this.isChange){让changeData={inquiryNo:this.inquiry.inquiryNo,inquiryTitle:this.inquiry.inquiryTitle}window.sessionStorage.setItem('changeData',JSON.stringify(changeData))}to.meta.isChange=this.isChangenext()}在列表页面判断是否需要修改数据：）这。list.forEach(item=>{if(item.inquiryNo===changeData.inquiryNo){item.inquiryTitle=changeData.inquiryTitle}})}}activatedHook函数，keep-alive组件激活时自动执行，判断如果需要修改，从本地取出数据，循环遍历list数据，找出需要修改的item，修改显示的数据（因为是临时修改，所以只修改显示的参数）；场景三：详情页点击删除itemDatadetail.vuebeforeRouteLeave(to,from,next){if(to.name==='M2mBoard'&&!this.idDel){to.meta.keepAlive=true}next()}删除操作，可以排除，不直接使用缓存，或者和修改一样的操作，判断为删除，暂时删除，列表中缓存的数据也可用；以上三种情况通常会同时出现，所以最终的写法是：detail.vuebeforeRouteLeave(to,from,next){if(to.name==='M2mBoard'&&!this.idDel){to.meta.keepAlive=true}if(this.isChange){letchangeData={inquiryNo:this.inquiry.inquiryNo,inquiryTitle:this.inquiry.inquiryTitle}window.sessionStorage.setItem('changeData',JSON.stringify(changeData))}to.meta.isChange=this.isChangenext()}list.vuebeforeRouteLeave(to,from,next){from.meta.keepAlive=falsenext()},activated(){if(this.$route.meta.isChange){让changeData=JSON.parse(window.sessionStorage.getItem('changeData'))this.list.forEach(item=>{if(item.inquiryNo===changeData.inquiryNo){item.inquiryTitle=changeData.inquiryTitle}})}}路由在列表页跳转时，需要执行meta.keepAlive=false操作，防止出现,从detail.vue跳回来后，list.vue与其他页面路由时一直处于缓存状态，数据不更新；注意：在info.vue中跳转到list.vue.go(-1)的路由activity最好使用this.$router，否则回到list.vue页面，数据有缓存，但是页面位置会不是上次访问的地点；具体原因还在研究中，哈哈哈……ok，以上就是项目开发使用中keep-alive的整个思路；记录一下，以免忘记，欢迎参考指正。
