详解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中的对象创建 实例附注释
Feb 08 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
即兴演讲稿
2014/01/04 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python