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中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
JS实现可视化文件上传
Sep 08 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
js module大战
Apr 19 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
js中的this关键字详解
2013/09/25 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
基于node.js之调试器详解
2017/08/22 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
p5.js临摹动态图形的方法
2019/10/23 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python能开发游戏吗
2020/06/11 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
升职自荐信
2013/11/28 职场文书
冬季安全检查方案
2014/05/23 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
工厂标语大全
2014/10/06 职场文书
收费员岗位职责
2015/02/14 职场文书