详解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中的window.event.keyCode使用介绍
Apr 26 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
js命名空间写法示例
2015/12/18 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
python实现爬虫下载美女图片
2015/07/14 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
给实习单位的感谢信
2014/02/01 职场文书
业务内勤岗位职责
2014/04/30 职场文书
人事任命书格式
2014/06/05 职场文书
组工干部演讲稿
2014/09/02 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang