详解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图片预加载技术(详细演示)
Mar 12 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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中的命名空间相关概念浅析
2015/01/22 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
个人实习生的自我评价
2014/02/16 职场文书
会计员岗位职责
2014/03/15 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2014年检验科工作总结
2014/11/22 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
深入理解pytorch库的dockerfile
2022/06/10 Python