vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置


Posted in Javascript onNovember 26, 2019

需求:

商品列表页面浏览,进入商品详情,点击返回仍然是之前浏览的位置

vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

实现:

使用 vuekeep-aliveinclude 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新

加需要缓存的列表页面定义一个数据集在 vuex

state:{
  pageListArr:[]
}

列表页的 nameproList ,详情页的 nameproDetail ,只有 PageListArr 包含的字段才会被缓存,如 pageListArr.push("proList")

<keep-alive :include="pageListArr">
  <router-view></router-view>
</keep-alive>

思路:

在页面初始化前,获取来源页面的 name 和要去加载页面的 name .

vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

在这里使用全局导航守卫

router.beforeEach((to, from, next) => {
 // 来源页面name -> from.name
 // 去往页面name -> to.name
 // 如果要跳转的页面为商品列表,且不是从商品详情返回或者跳转
 if(to.name===`proList`&&from.name!==`proDetail`){
   pageListArr.push(`proList`)
 }
 // 来源为商品页面返回列表页面
 if(to.name===`proList`&&from.name===`proDetail`){
   console.log(`不做处理`)
 }
})

当多个不同的列表页面需要设置缓存时,如分类商品列表,活动商品列表

需要先判断 pageListArr 是否已缓存某些页面,只有从商情详情返回已缓存的列表页才是无刷新,未缓存的列表页面仍然需要新缓存

vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

总结

以上所述是小编给大家介绍的vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 #Javascript
vue中keep-alive,include的缓存问题
Nov 26 #Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 #Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
原生js实现贪食蛇小游戏的思路详解
Nov 26 #Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
JavaScript计算正方形面积
Nov 26 #Javascript
You might like
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python 录制系统声音的示例
2020/12/21 Python
python链表类中获取元素实例方法
2021/02/23 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
平面设计求职信
2014/03/10 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
检讨书格式
2015/05/07 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书