示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了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 = ‘'
}
结语
感谢您的观看,如有不足之处,欢迎批评指正。
原文地址:https://segmentfault.com/a/1190000017356279
示例vue 的keep-alive缓存功能的实现的更多相关文章
- nginx的反向代理功能和缓存功能
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- Nginx实现负载均衡&Nginx缓存功能
一.Nginx是什么 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambl ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- 关于vue里页面的缓存
keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-ali ...
- Nginx缓存功能、防盗链、URL重写
nginx做为反向代理时,能够将来自upstream的响应缓存至本地,并在后续的客户端请求同样内容时直接从本地构造响应报文. nginx的缓存数据结构: 共享内存:存储键和缓存对象元数据 磁盘空间:存 ...
- 使用Nginx的proxy_cache缓存功能取代Squid(转)
Nginx从0.7.48版本开始,支持了类似Squid的缓存功能.这个缓存是把URL及相关组合当作Key,用md5编码哈希后保存在硬盘上,所以它可以支持任意URL链接,同时也支持404/301/302 ...
- 使用Nginx的proxy_cache缓存功能取代Squid
Nginx从0.7.48版本开始,支持了类似Squid的缓存功能.这个缓存是把URL及相关组合当作Key,用md5编码哈希后保存在硬盘上,所以它可以支持任意URL链接,同时也支持404/301/302 ...
- 使用Nginx的proxy_cache缓存功能取代Squid[原创]
使用Nginx的proxy_cache缓存功能取代Squid[原创] [文章作者:张宴 本文版本:v1.2 最后修改:2009.01.12 转载请注明原文链接:http://blog.zyan.cc/ ...
- Vue+Vuex 实现自动登录功能
刚刚实现了Vue+Vuex的自动登录功能,在实现的时候遇到了一些问题,这里记录一下: 因为这个还不够完善,在写完下列代码后,又进行了补充,可以从https://www.cnblogs.com/xiao ...
随机推荐
- Charles使用小结
charles,抓包神器,记录几个测试过程中常用的功能 连接同一局域网的开发机 域名跳转MapRemoteSetting 抓取Https接口 1.下载3.10以上破解版,按如下步骤安装 ...
- Codeforces Round #431 (Div. 2) A
Where do odds begin, and where do they end? Where does hope emerge, and will they ever break? Given ...
- 2017ACM/ICPC广西邀请赛 Duizi and Shunzi
题意:就是一个集合分开,有两种区分 对子:两个相同数字,顺子:连续三个不同数字,问最多分多少个 解法:贪心,如果当前数字不构成顺子就取对子 /2,如果可以取顺子,那么先取顺子再取对子 #include ...
- Uva1377
/* 在n个刻度和他们的差里挑不超过7个刻度,0是固定的,最大的刻度肯定是最大值,然后剩下的dfs挑. */ #include<bits/stdc++.h> #define inf 0x3 ...
- scp 可以在 2个 linux 主机间复制文件
Linux scp命令用于Linux之间复制文件和目录,具体如何使用这里好好介绍一下,从本地复制到远程.从远程复制到本地是两种使用方式.这里有具体举例: ================== Linu ...
- .net 中 Json 与List 相互转
var duanxin1 = new DuanXin(); duanxin1.RECEIVE_LOGIN_NAME = "dd"; duanxin1.RECEIVE_Number ...
- scrollHelper
(function ($) { var mouseScroll = function (e) { try { var origEvent = e.originalEvent; origEvent.pr ...
- Control中的AOP实现非业务需求
一.能够使用Control中的AOP实现非业务需求的功能 本文目录 一.ActionFilterAttribute类 二.实现自定义Attribute 一.ActionFilterAttribute类 ...
- swift学习笔记3-4
再牛逼的梦想,也抵不住你傻逼似的坚持! 我跑啊跑啊,为的就是赶上那个被寄予厚望的自己. 三.运算符+表达式 swift允许重载运算符,比如 “+”你可以重载它 后续会详细介绍 赋值运算符 pass 算 ...
- C# 初始学习心情
当听说需要转做.net的时候.内心是忐忑不安的.因为突然从前端转向后端,几乎完全颠倒了...一个注重界面实现功能.一个注重逻辑的开发,然并卵,服从需求吧. 虽说公司需要你转.但是时间是不允许的,所以只 ...