详解vue服务端渲染浏览器端缓存(keep-alive)


Posted in Javascript onOctober 12, 2018

在使用服务器端渲染时,除了服务端的接口缓存、页面缓存、组建缓存等,浏览器端也避免不了要使用缓存,减少页面的重绘。

这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的使用

假如现在我们有两个页面,home.vue 和 about.vue

home.vue

<template>
 <div>
 home
 </div>
</template> 
<script>
 export default {
 name: Home,
 created() {
 console.log('home)
 }
 } 
</script>

about.vue

<template>
 <div>
 about
 </div>
</template> 
<script>
 export default {
 name: About,
 created() {
 console.log('home)
 }
 } 
</script>

app.vue中我们使用keep-alive缓存

<template>
 <div id="app">
 <keep-alive include="Home">
 <router-view class="view">
 </router-view>
 </keep-alive>
 </div>
</template>

<script>
export default {
 name: 'App'
}
</script>

这时候运行我们会发现Home页面就缓存下来了,大功告成

所有的问题都是我在日常生活中用到的,可能会有不正确或者不是最佳解决方案,希望留下你的建议和意见,共同学习,共同进步。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 #Javascript
在JS循环中使用async/await的方法
Oct 12 #Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 #Javascript
vue项目环境变量配置的实现方法
Oct 12 #Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 #Javascript
原生JS实现轮播图效果
Oct 12 #Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 #Javascript
You might like
小偷PHP+Html+缓存
2006/11/25 PHP
DISCUZ 分页代码
2007/01/02 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
一看就懂得Python的math模块
2018/10/21 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python输出指定字符串的方法
2020/02/06 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
小学生优秀评语大全
2014/04/22 职场文书
兴趣小组活动总结
2014/05/05 职场文书
关于青春的演讲稿
2014/05/05 职场文书
湘江北去观后感
2015/06/15 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
2019思想汇报范文
2019/05/21 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Python采集壁纸并实现炫轮播
2022/04/30 Python