详解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 20 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
微信小程序 navbar实例详解
May 11 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
详解vue-router导航守卫
Jan 19 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
用Pygal绘制直方图代码示例
2017/12/07 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
医科大学生毕业的自我评价分享
2013/11/12 职场文书
医院总经理职责
2013/12/26 职场文书
文明好少年事迹材料
2014/08/19 职场文书
500字小学生检讨书
2015/02/19 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
Django显示可视化图表的实践
2021/05/10 Python
python控制台打印log输出重复的解决方法
2021/05/14 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python