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 相关文章推荐
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
微信小程序自定义联系人弹窗
May 26 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 IPV6正则表达式验证代码
2010/02/16 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php图像处理类实例
2015/07/28 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python扫描线填充算法详解
2020/02/19 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
安全教育实施方案
2014/03/02 职场文书
应届生面试求职信
2014/07/02 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
党支部活动策划方案
2014/08/18 职场文书
2014和解协议书范文
2014/09/15 职场文书
2015入党自荐书范文
2015/03/05 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
西安事变观后感
2015/06/12 职场文书
谢师宴家长答谢词
2015/09/30 职场文书