详解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 MD4
Dec 20 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
js 数组操作代码集锦
Apr 28 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
js的一些常用方法小结
Jun 29 Javascript
js 幻灯片的实现
Dec 06 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
AngularJS表单验证功能分析
May 26 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
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
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP getName()函数讲解
2019/02/03 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python的keyword模块用法实例分析
2015/06/30 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
卖房授权委托书样本
2014/10/05 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
公司转让协议书
2016/03/19 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL