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 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
vant自定义二级菜单操作
Nov 02 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
js实现删除li标签一行内容
2019/04/16 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python第三方库的安装方法总结
2016/06/06 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python的argparse库使用详解
2018/10/09 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
华为慧通面试题
2012/09/11 面试题
我有一个梦想演讲稿
2014/05/05 职场文书
体育专业求职信
2014/07/16 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
歌舞青春观后感
2015/06/10 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
入党心得体会
2019/06/20 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL