vue2使用keep-alive缓存多层列表页的方法


Posted in Javascript onSeptember 21, 2018

vue关于列表页和详情页的展现比较让人头疼,在列表页面点击进详情页返回以后,列表页会重新刷新。假如在第五页找到的数据,点击修改后返回又跳回第一页了,这个时候就需要用到keep-alive缓存页面数据,但keep-alive缓存的页面一直不会发生改变,特别是列表页层级很多的情况下,更加复杂。

譬如我后台的一个管理页面,因为数据关联很复杂,所以做了三层列表页嵌套,上一层点击管理就可以进行下一层的数据展现,每一层列表页都包含了3到4个需要循环展现的数据。在加入keep-alive之前我使用路由和自定义组件的方式组织页面的。

路由到详情页,然后详情页加载列表页组件展现,然后在组件模块通过props:[‘id']获取数据

import Vmothod from '../page/ApiMethodTable.vue';
import VsystemParam from '../page/ApiSystemParamTable.vue';
import VsystemError from '../page/ApiSystemErrorTable.vue';
<template>
 <div>
  <Vmothod :id="id"></Vmothod>
  <VsystemParam :id="id"></VsystemParam>
  <VsystemError :id="id"></VsystemError>
 </div>
</template>

但是如此以来,在返回上一层或者修改数据回跳后,因为没有页面缓存,所以页数会变成第一页,使用上很不方便。

在网上找了相关解决方案后,我试着在路由上加入了keep-alive参数。

meta: { keepAlive: true }
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

这样解决了页面不缓存的问题,但跳转之后所有页面都是一模一样的数据,这就很不对了。后台发觉还要在页面初始化时加入钩子函数拉取数据

activated(){
  this.getData();
 }

但是发觉还是不行,上一页通过props:[‘id']传递到组件参数也会被缓存,如此以来props不能用了,只有通过在路由来传递参数。

在路由的时候带上id参数

path:'/method/:id'

然后在组件页面获取参数

self.$route.params.id

如此终于顺畅的缓存了详情页的当前页面参数。

以上这篇vue2使用keep-alive缓存多层列表页的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 #Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 #Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 #Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 #Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 #Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 #Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 #Javascript
You might like
PHP mkdir()定义和用法
2009/01/14 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python实现单词拼写检查
2015/04/25 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python WSGI的深入理解
2018/08/01 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Delphi笔试题
2016/11/14 面试题
管理信息系学生的自我评价
2014/01/11 职场文书
军训考核自我鉴定
2014/02/13 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers