详解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以对象为索引的关联数组
Jul 04 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
jQuery异步提交表单实例
May 30 jQuery
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
django页面跳转问题及注意事项
2019/07/18 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python装饰器代码深入讲解
2021/03/01 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
教师求职自荐信
2014/03/09 职场文书
旅游活动总结
2014/08/27 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
幼师中班个人总结
2015/02/12 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
2016猴年春节问候语
2015/11/11 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python