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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
Vue 自适应高度表格的实现方法
May 13 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的宝库目录--PEAR
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
php随机输出名人名言的代码
2012/10/07 PHP
php-fpm配置详解
2014/02/12 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python3 Random模块代码详解
2017/12/04 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python实现的堆排序算法示例
2018/04/29 Python
Linux下python制作名片示例
2018/07/20 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python属于软件吗
2020/06/18 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
小区门卫岗位职责
2013/12/31 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
房地产项目建议书
2014/03/12 职场文书
心理咨询承诺书
2014/05/20 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
在Python中如何使用yield
2021/06/07 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript