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中的关联数组分析
Apr 09 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jquery form 加载数据示例
Apr 21 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
node跨域请求方法小结
Aug 25 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
vue select 获取value和lable操作
Aug 28 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
谈一谈收音机的高放电路
2021/03/02 无线电
业余方法DIY电子管FM收音机
2021/03/02 无线电
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python函数返回不定数量的值方法
2019/01/22 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
如何用Python绘制3D柱形图
2020/09/16 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
华为c/c++笔试题
2016/01/25 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
建筑行业的大学生自我评价
2013/12/08 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
农林环境专业求职信
2014/03/13 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
三严三实学习心得体会
2014/10/13 职场文书
财务检查整改报告
2014/11/06 职场文书
三八节祝酒词
2015/08/11 职场文书
预备党员表决心的话
2015/09/22 职场文书