详解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 options属性集合操作代码
Dec 28 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
vue之数据交互实例代码
Jun 16 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
three.js实现圆柱体
Dec 30 Javascript
JavaScript 类的封装操作示例详解
May 16 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中读写文件实现代码
2011/10/20 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python求最大连续子数组的和
2018/07/07 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python多线程同步之文件读写控制
2021/02/25 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python实现ftp文件传输功能
2020/03/20 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
入党思想汇报
2014/01/05 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
田径运动会通讯稿
2014/09/13 职场文书
无房证明范本
2014/09/17 职场文书
酒店前台辞职书
2015/02/26 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python