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 相关文章推荐
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
详解js根据百度地图提供经纬度计算两点距离
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
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP编写简单的App接口
2016/08/28 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JavaScript模板入门介绍
2012/09/26 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
VUE动态生成word的实现
2020/07/26 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
深入浅析Python中的迭代器
2019/06/04 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
scrapy头部修改的方法详解
2020/12/06 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
事务机电主管工作职责
2014/02/25 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
公司搬迁通知
2015/04/20 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS