详解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 相关文章推荐
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
QT与javascript交互数据的实现
May 26 Javascript
Node实现搜索框进行模糊查询
Jun 28 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和ACCESS写聊天室(八)
2006/10/09 PHP
PHP教程 基本语法
2009/10/23 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
javascript 一些用法小结
2009/09/11 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
socket + select 完成伪并发操作的实例
2017/08/15 Python
python机器学习之贝叶斯分类
2018/03/26 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
存储过程和sql语句的优缺点
2014/07/02 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
校三好学生主要事迹
2014/01/11 职场文书
校园之声广播稿
2014/01/31 职场文书
社区工作感言
2014/02/21 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
新生入学欢迎词
2015/01/26 职场文书
代理词怎么写
2015/05/25 职场文书
反邪教学习心得体会
2016/01/15 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书