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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
Javascript UrlDecode函数代码
Jan 09 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php数组随机排序实现方法
2015/06/13 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
nodejs教程之入门
2014/11/21 NodeJs
Jquery中Event对象属性小结
2015/02/27 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
工艺员岗位职责
2014/02/11 职场文书
综艺节目策划方案
2014/06/13 职场文书
典型事迹材料范文
2014/12/29 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL