vue 详情跳转至列表页实现列表页缓存


Posted in Javascript onMarch 27, 2019

甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新、位置固定到之前点的商品的位置)

本来想着scrollBehavior应该可以满足,但是实际操作中发现:如果列表带着分页,位置是不会定位到点击的位置的

vue 详情跳转至列表页实现列表页缓存

在网上转了一圈,终于找到适合自己的方法——beforeRouteLeave

注:beforeRouteLeave只对一级页面起作用,不适用于children中的其他二级或其他级别的页面 

以上是准备工作,接下来 可以步入正题了:

找到入口挂载页面:App.vue 在router-view外部包裹一个keep-alive的标签

因为不是所有页面都需要缓存,所以把需要缓存的页面中加入name值,并将name值加入keep-alive中

<keep-alive v-if="isRouterAlive" include="starShop" >
  <router-view></router-view>
</keep-alive>

当然,仅仅是这些,是不能实现缓存的,

刚开始我是学着网上的方法,这样写的,当从列表点入详情页时,就将 列表页的keepalive值,赋为true (实现缓存)

beforeRouteLeave(to, from, next) {
  if(from.path == '/sale/newGoods/index' && to.path == '/goods/detail') {
    from.meta.keepAlive = true;
    this.loading = true;
    next();
    return
  } else {
    from.meta.keepAlive = false;
    window.location.reload();
    this.$destroy();
    next();
    return
  }
},

但是后期甲爸爸发现一个bug: 当我从列表一点击进入详情之后,如果直接从详情页,点击进入别的店铺列表页,即列表二,最新的列表页内展示的商品列表是之前的数据,并没有变为最新的店铺列表内容 , 即列表二页面展示的还是列表一的商品

玩大了,这个问题比较着急啊,万一把顾客绕晕了,人家不买东西了,那我罪过不就大了咩

vue 详情跳转至列表页实现列表页缓存

晚上趁着月黑风高、夜深人静的时候,我苦思冥想,终于把这个社会毒瘤挖掉了

我绝不是屈居于甲爸爸的淫威之下,只是因为我对技术的执著,过度追求完美的我,忍受不聊我的东西出现这样大的漏洞

要看解决办法的直接来这    ↓↓↓↓↓↓

首先摒弃上面的列表页面的方法

第一步:找到商品详情页,最为主角之一,我在这里用到了beforeRouteEnter、beforeRouteLeave

beforeRouteEnter (to, from, next) {
  next(vm =>{
    vm.formUrl = from.path;
    console.log(vm.formUrl)
  });
},
beforeRouteLeave(to, from, next) {
  to.meta.keepAlive = false;
  if(to.path == this.formUrl){
    to.meta.keepAlive = true;
    next();
    return
  }else{
    to.meta.KeepAlive = false;
    window.localStorage.removeItem('isRefresh')
    this.$destroy();
    next();
    return
  }
},

beforeRouteEnter:进入路由之前执行的函数(拿到列表一的路由)

beforeRouteLeave:离开路由之前执行的函数(拿到列表二的路由)

通过这两个钩子,可以成功的拿到事件的另外两位主角路由(列表一、列表二)

在详情页中,当离开该页之前,在beforeRouteLeave内进行列表一、列表二的路由比较

若两路由相同,则跳转目的页面(to.meta.keepAlive)值为true,列表页面进行缓存(比如从详情页返回的时候)

若两路由不同,则跳转目的页面发生了变化(比如从鞋帽列表——>鞋子商品——>鞋子列表),则鞋子列表页面不需要缓存,需要刷新获取最新的鞋子列表数据

第二步:处理事件的第二主角——列表页面

这里我仅用到了beforeRouteEnter

这个钩子中,我们可以拿到当前页面的keepAlive值

这个值是在详情页中就已经给定的

如果是true,表示缓存,否则为不缓存(刷新)

防止页面一直刷新,变成死亡函数,我们要在data中声明一个变量isRefresh

isRefresh: window.localStorage.getItem('isRefresh') || true
beforeRouteEnter (to, from, next) {
  next(vm =>{
    if(to.meta.keepAlive != true && to.meta.keepAlive != null){
      vm.goods=[];
      window.localStorage.setItem('isRefresh',true)                
            if(JSON.stringify(window.localStorage.getItem('isRefresh')) != false){
                  
                window.localStorage.setItem('isRefresh',false)
        location.reload();
      }  
    }
  });
  return
},

如果当前页to.meta.keepAlive值不为true,且值存在,则需刷新页面

防止页面一直刷新,

window.localStorage.setItem('isRefresh',true)

设置缓存变量isRefresh,值为true(表示需要刷新)

当to.meta.keepAlive值不为true且isRefresh值为true,页面刷新,且isRefresh赋值为false,即关闭刷新

vm.goods=[];是当页面跳去新的列表页刷新之前,会出现短暂的列表展示,为了避免不必要的误导,在检测到是跳转到新的列表页时,我将列表页的goods列表情况,视觉感受会好一些

因项目不同而异,不需要可以去掉

多张页面之间跳转,判断是否需要缓存或刷新获取新数据,就是这样了

或许因为业务需求不同,技术处理方式可能会不同,希望能帮助到各位,或者给各位一些启发,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
js实现验证码功能
Jul 24 Javascript
vue中多个倒计时实现代码实例
Mar 27 #Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 #Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 #Javascript
JavaScript惰性载入函数实例分析
Mar 27 #Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 #Javascript
详解JS浏览器事件循环机制
Mar 27 #Javascript
详解如何更好的使用module vuex
Mar 27 #Javascript
You might like
PHP Array交叉表实现代码
2010/08/05 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python安装gdal的两种方法
2019/10/29 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
几个人围成一圈的问题
2013/09/26 面试题
义诊活动总结
2015/02/04 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书