vue2使用keep-alive缓存多层列表页
2017-11-21 10:34
621 查看
vue关于列表页和详情页的展现比较让人头疼,在列表页面点击进详情页返回以后,列表页会重新刷新。假如在第五页找到的数据,点击修改后返回又跳回第一页了,这个时候就需要用到keep-alive缓存页面数据,但keep-alive缓存的页面一直不会发生改变,特别是列表页层级很多的情况下,更加复杂。
譬如我后台的一个管理页面,因为数据关联很复杂,所以做了三层列表页嵌套,上一层点击管理就可以进行下一层的数据展现,每一层列表页都包含了3到4个需要循环展现的数据。在加入keep-alive之前我使用路由和自定义组件的方式组织页面的。
路由到详情页,然后详情页加载列表页组件展现,然后在组件模块通过props:[‘id’]获取数据
但是如此以来,在返回上一层或者修改数据回跳后,因为没有页面缓存,所以页数会变成第一页,使用上很不方便。
在网上找了相关解决方案后,我试着在路由上加入了keep-alive参数。
这样解决了页面不缓存的问题,但跳转之后所有页面都是一模一样的数据,这就很不对了。后台发觉还要在页面初始化时加入钩子函数拉取数据
但是发觉还是不行,上一页通过props:[‘id’]传递到组件参数也会被缓存,如此以来props不能用了,只有通过在路由来传递参数。
在路由的时候带上id参数
然后在组件页面获取参数
如此终于顺畅的缓存了详情页的当前页面参数。。。。
譬如我后台的一个管理页面,因为数据关联很复杂,所以做了三层列表页嵌套,上一层点击管理就可以进行下一层的数据展现,每一层列表页都包含了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缓存多层列表页的方法
- vue使用keep-alive实现数据缓存不刷新
- 深入理解与使用keep-alive(配合router-view缓存整个路由页面)
- vue2中的keep-alive使用总结及注意事项
- Vue2.0 keep-alive 后组件不使用缓存
- 使用vue的时候我们使用keep-alive会将页面缓存的解决方法
- keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
- node访问iis使用keep-alive设置不当
- 如何使用HttpWebRequest POST数据时设置Connection="Keep-Alive"
- 使用TCP Keep-alive与TCP_USER_TIMEOUT机制判断通信对端是否存活
- 基于vue中keep-alive缓存问题的解决方法
- TCP keep-alive的原理与使用
- 聊聊keep-alive组件的使用及其实现原理
- vue中 keep-alive 的使用
- 在多层应用程序中使用缓存:最佳实践
- Vue路由开启keep-alive缓存页面
- 聊聊keep-alive组件的使用及其实现原理
- 使用TCP Keep-alive与TCP_USER_TIMEOUT机制判断通信对端是否存活
- Vue2.0 心法 ==> 第三层:keep-alive 缓存之坑
- W5500 keep-alive的用途及使用