Vue keepAlive 数据缓存工具，实现返回上一个页面浏览的位置；

everfly 发布于2019-08-26 18:27 / 1644人阅读

摘要：需求分析背景数据列表页，滚动加载数据多条数据情况下，点击某一条，进入详细页进行编辑修改，删除操作保存返回上一页在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的解决办法原始的办法在点击详情页的时候，记住浏览位置，传递参数或者存到本

需求分析

背景：
1.数据列表页，滚动加载数据；
2.多条数据情况下，点击某一条，进入详细页进行编辑（修改，删除）操作；
3.保存返回上一页；

在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的；

解决办法

1.原始的办法：在点击详情页的时候，记住浏览位置，传递参数或者存到本地缓存，然后在详情页操作完毕后，返回的时候，路由守卫可以判断，是否详情页跳转回来的，然后让页面滚动到上次记录的位置；

思路是这样，实际操作很麻烦；
2.推荐办法：使用vue动态组件keep-alive,搭配路由守卫函数beforeRouteLeave，以及activated钩子函数；

对于钩子函数执行顺序，以及作用详细说明，请参考vue组件的生命周期

步骤详解

我的步骤是按照开发思路进行的，场景就是从商品列表页——>商品详细页——>商品列表（数据缓存）；
开发之前看到网上好多人都是在路由文件里面配置
meta:{keepAlive:true}
但我觉得没有必要，因为列表页不是一直需要缓存数据的，假如从首页进入，则不需要，所以就在路由守卫函数中判断是否需要缓存数据即可；

以下代码，使用list.vue代表列表页；detail.vue代表详细页；

场景1：点击返回，判断路由跳转的是否是需要缓存的列表页：

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard") {
      to.meta.keepAlive = true
    }
    next()
  }

由于keepAlive是vue2.0中内置组件，所以设置页面路由meta.keepAlive = true即可缓存数据，路由跳转是利用函数this.$router.go(-1)；就可以显示在上次浏览的记录位置；

场景2：编辑详细页数据，回到列表页，则需要将修改的数据保存到本地，然后在列表页的缓存数据中，更改显示即可：

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard") {
      to.meta.keepAlive = true
    }
    if (this.isChange) {
      let changeData = {
        inquiryNo: this.inquiry.inquiryNo,
        inquiryTitle: this.inquiry.inquiryTitle
      }
      window.sessionStorage.setItem("changeData", JSON.stringify(changeData))
    }
    to.meta.isChange = this.isChange
    next()
  }

列表页中判断一下，是否需要修改数据：

list.vue

activated () {
    if (this.$route.meta.isChange) {
      let changeData = JSON.parse(window.sessionStorage.getItem("changeData"))
      this.list.forEach(item => {
        if (item.inquiryNo === changeData.inquiryNo) {
          item.inquiryTitle = changeData.inquiryTitle
        }
      })
    }
  }

activated 钩子函数，在keep-alive组件激活时自动执行，判断如果需要修改，从本地取出数据，循环列表数据，找出需要修改的那一条，进行显示数据的修改（因为是临时修改，所以只修改显示的参数即可）；

场景3：在详细页点击删除该条数据

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard" && !this.idDel) {
      to.meta.keepAlive = true
    }
    next()
  }

删除操作，可以排除后直接不用缓存，或者跟修改一样的操作，判断是删除，临时删除，列表中缓存的数据也可以；

上面3种情况通常会同时出现，所以最后的写法就是：

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard" && !this.idDel) {
      to.meta.keepAlive = true
    }
    if (this.isChange) {
      let changeData = {
        inquiryNo: this.inquiry.inquiryNo,
        inquiryTitle: this.inquiry.inquiryTitle
      }
      window.sessionStorage.setItem("changeData", JSON.stringify(changeData))
    }
    to.meta.isChange = this.isChange
    next()
  }

list.vue

beforeRouteLeave (to, from, next) {
    from.meta.keepAlive = false
    next()
  },
  activated () {
    if (this.$route.meta.isChange) {
      let 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的路由活动最好使用this.$router.go(-1)，不然回到list.vue页面，数据缓存了，但是页面位置不会是上次访问的位置；具体原因还在研究，哈哈哈...

ok，上面就是在项目开发使用中用到的keep-alive的整个思路；记录一下，以免忘记，还有欢迎参考与指正。

云服务器 GPU云服务器 js返回上一个页面保留数据 js返回数据给上一个页面 java返回页面实现 js调用浏览器的返回数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110230.html

前端面试--vue

摘要：注意重点是获取更新后的就是在开发过程中有个需求是需要在阶段操作数据更新后的节点这时候就需要用到就是用来知道什么时候更新完成原因在钩子函数执行的时候其实并未进行任何渲染，而此时进行操作无异于徒劳，所以在中一定要将操作的代码放进的回调函数中。 1. 最简单的vue el: dom节点 data: 数据 Vue 测试实例 - 菜鸟教程(runoob.com) ...

coordinate35 2019-08-26 13:45 评论0 收藏0
vue 在移动端体验上的优化解决方案

摘要：去年年底自己搭了一个在移动端的开发框架，感觉体验不是很好。路由懒加载首页终于写完了，以上这些就是我在移动端体验优化的实战。去年年底自己搭了一个vue在移动端的开发框架，感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化自定义vuex-plugins-loading 路由切换动画 + keep alive 动态管理缓存组件 better-sc...

godlong_X 2019-05-22 11:25 评论0 收藏0
另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

摘要：如何添加这个条件，判断用户是否刷新了页面呢我们知道，当使用后，只有第一次进入后会触发钩子函数，再次进入就不再执行了。目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注：　此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求...

Ocean 2019-08-21 17:43 评论0 收藏0
彻底揭秘keep-alive原理

摘要：我们留意到，这里不是简单地将置为，而是遍历调用函数删除。执行组件的钩子函数删除缓存还要对应执行组件实例的钩子函数。这个在不可忽视钩子函数章节会再次出场。参考技术揭秘源码一、前言原文链接：github.com/qi... 本文介绍的内容包括： keep-alive用法：动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-a...

lavnFan 2019-05-23 17:29 评论0 收藏0