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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
JS常用正则表达式总结
Nov 12 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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写出自己的BLOG系统 2
2010/04/12 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
表彰大会主持词
2014/03/26 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2014年班组工作总结
2014/11/20 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
初中家长评语和期望
2014/12/26 职场文书