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

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

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

在网上转了一圈，终于找到适合自己的方法——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： 当我从列表一点击进入详情之后，如果直接从详情页，点击进入别的店铺列表页，即列表二，最新的列表页内展示的商品列表是之前的数据，并没有变为最新的店铺列表内容 ， 即列表二页面展示的还是列表一的商品

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

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

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

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

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

第一步：找到商品详情页，最为主角之一，我在这里用到了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列表情况，视觉感受会好一些

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

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

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

赞 (0)

相关推荐

  • 详解vue-router数据加载与缓存使用总结

    之前开发了一个单页面应用,按照深度,分为三层:目录页.一级子页(标签页.故事页等).二级子页(故事编辑页). 这三类页面都共享一个完整的数据model,从上级页面进入下一级页面时,能够加载相应数据:回到上一级时,数据有更新.举个栗子,从故事页点击"编辑"按钮,进入故事编辑页则默认填充点击的"编辑"按钮所对应的故事数据:而当在故事编辑页更新数据,返回到故事页时,刚刚更新的信息也能在故事页展示. 对于这项需求,我们需要解决如下几个问题: 三层页面共享数据: 进入或退回当

  • 关于vue里页面的缓存详解

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-alive标签内部添加 include:字符串或正则表达式.只有匹配的组件会被缓存 exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 结合router缓存部分页面: 比较实用的例子: 思路:通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值.从而动态的

  • 详解Vue中组件的缓存

    详解Vue中组件的缓存

    之前在<Vue一个案例引发的动态组件与全局事件绑定总结>这篇文章中简单提到过组件的缓存.当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存. 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来. 自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换. 在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了. 最近项目中

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 Vue

  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了. 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', comp

  • vue项目中实现缓存的最佳方案详解

    vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

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

    甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该可以满足,但是实际操作中发现:如果列表带着分页,位置是不会定位到点击的位置的 在网上转了一圈,终于找到适合自己的方法--beforeRouteLeave 注:beforeRouteLeave只对一级页面起作用,不适用于children中的其他二级或其他级别的页面 以上是准备工作,接下来 可以步入正题

  • Vue页面跳转传递参数及接收方式

    最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式. 典型应用场景:列表页跳转到详情页 一.配置路由 文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router' import classify from '.././components/classify/classify.vue' import classifyChild from '.././components/cla

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    目录 vue路由跳转打开新窗口和关闭窗口 编程式导航 window.open( )方法 关闭窗口 window.close() vue路由跳转打开新窗口(被浏览器拦截) 第一种方法 第二种方法 第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗口 需求:从当前页面跳转到其他页面时,打开一个新窗口 比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航 编程式导航 使用路由对象的resolve的方法解析路由,可以得到location.router.href等目标路由的信息,只

  • vue页面跳转后返回原页面初始位置方法

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

  • Vue移动端右滑屏幕返回上一页附源码下载

    有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验.Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件.使用它可以轻松实现屏幕触控.滑动触发事件,提高用户体验.本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页. 查看演示  下载源码 安装依赖 使用npm安装vue-directive-touch组件. npm install vue-directive-touch --save 引入组件 在main.js中引入vue-directive-touch.

  • vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

  • Vue页面跳转动画效果的实现方法

    前言 现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现

  • Vue单页及多页应用全局配置404页面实践记录

    前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口.下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的. 总体思路 无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由,渲染相应的404页面.同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面.下面来说一下针对单页和多页

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo

随机推荐