DDR爱好者之家

vue2使用keep-alive缓存多层列表页的方法
站长资源 2024/11/26 佚名
18 1538
DDR爱好者之家 Design By 杰米

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缓存多层列表页的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米