vue 中的keep-alive实例代码
Vue 实现组件信息的缓存
当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载。
一、在app.vue里
<keep-alive> <router-view></router-view> </keep-alive>
但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果。
那么我们给部分组件加上,实现方法如下:
在app.vue
<!--这里是需要keepalive的--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> <keep-alive> <!-- 这里不会被keepAlive --> <router-view v-if="!$route.meta.keepAlive"></router-view>
二、 在路由的index.js页面里
{ path: '', name: '', component: '', meta: {keepAlive: true} // 这个是需要keepalive的 }, { path: '', name: '', component: , meta: {keepAlive: false} // 这是不会被keepalive的 }
这就实现了部分组件的缓存功能
如果缓存的组件想要清空数据或者执行初始化方法,在加载组件的时候调用activated钩子函数,如下:
activated: function () { this.data = ‘' }
总结
以上所述是小编给大家介绍的vue 中的keep-alive实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
vue.js内置组件之keep-alive组件使用
keep-alive是Vue.js的一个内置组件.<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 它提供了include与exclude两个属性,允许组件有条件地进行缓存. 举个栗子 <keep-alive> <router-view
-
vue keep-alive请求数据的方法示例
背景 index页面:首页品牌入口 list页面:商品列表页面 product页面:商品详情页面 从index页面进入list的时候要刷新页面,从product页面返回list的时候不需要刷新页面,所以list使用了keep-alive的属性,keepAlive设置为true,但是开发过程中发现一个问题,从product返回到list的时候,列表页面不是正确的品牌列表,而是之前一次点击的品牌列表.由于每个人遇到关于keep-alive请求数据不正确的问题不同,这里就直接说我的解决办法.希望能给大
-
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好. keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件
-
解决vue keep-alive 数据更新的问题
在项目中使用<keep-alive>包含<router-view>实现页面缓存,加速页面加载, 同时,这种方式带来一些弊端,请看如下大神解释: *********************************** 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated. 当再次进入(前进或者后退)时,只触发activated. ********************
-
vue2使用keep-alive缓存多层列表页的方法
vue关于列表页和详情页的展现比较让人头疼,在列表页面点击进详情页返回以后,列表页会重新刷新.假如在第五页找到的数据,点击修改后返回又跳回第一页了,这个时候就需要用到keep-alive缓存页面数据,但keep-alive缓存的页面一直不会发生改变,特别是列表页层级很多的情况下,更加复杂. 譬如我后台的一个管理页面,因为数据关联很复杂,所以做了三层列表页嵌套,上一层点击管理就可以进行下一层的数据展现,每一层列表页都包含了3到4个需要循环展现的数据.在加入keep-alive之前我使用路由和自定义
-
基于vue中keep-alive缓存问题的解决方法
vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用
-
Vue中 key keep-alive的实现原理
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 keep-aliv是Vue.js的一个内置组件.它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中. 它有两个生命周期: activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 它提供了include与exclude两个属性,允许组件有条件地进行缓存. keep-a
-
vue解决使用webpack打包后keep-alive不生效的方法
问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下: var menus = [ { path: '/user', name: '用户', component: '/user', redirect: '/user/index1', icon: 'fa-bandcamp', meta: { keepAlive: false }, children:
-
vue中keep-alive的用法及问题描述
1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.keep-alive的基本用法 在app.vue中 <!-- 缓存所有的页面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"&g
-
vue中进入详情页记住滚动位置的方法(keep-alive)
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <
-
vue 使某个组件不被 keep-alive 缓存的方法
提出问题 最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题 这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等. 解决问题 (1). 查看官方文档 当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周
随机推荐
- 深入理解golang的异常处理机制
- JS实现可编辑的后台管理菜单功能【附demo源码下载】
- 使用python实现递归版汉诺塔示例(汉诺塔递归算法)
- C语言获取Linux系统精确时间的方法
- 详解C#中通过委托来实现回调函数功能的方法
- Myeclipse 自动生成可持久化类的映射文件的方法
- 设置cookie指定时间失效(实例代码)
- Nodejs实现的一个静态服务器实例
- Nginx服务器中的重定向配置参考指南
- 基于Jquery实现的一个图片滚动切换
- android USB如何修改VID具体实现
- Java中五种不同方法的创建对象
- c语言程序设计文件操作方法示例(CreateFile和fopen)
- Android 逆向学习详解及实例
- PHP cookie,session的使用与用户自动登录功能实现方法分析
- 易语言添加组件的方法
- Android实现列表数据按名称排序、中英文混合排序
- 记一次vue-webpack项目优化实践详解
- django有外键关系的两张表如何相互查找
- JS实现页面数据懒加载