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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
详解Vue3中对VDOM的改进
Apr 23 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 已经成熟
2006/12/04 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
python基础教程之循环介绍
2014/08/29 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python中reader的next用法
2018/07/24 Python
python实现接口并发测试脚本
2019/06/25 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
python 如何实现遗传算法
2020/09/22 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
某科技软件测试面试题
2013/05/19 面试题
民主生活会整改措施(党员)
2014/09/18 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
《鲸》教学反思
2016/02/23 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
httpclient调用远程接口的方法
2022/08/14 Java/Android