详解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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jquery 插件开发备注
Aug 27 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
微信小程序实现星星评分效果
Nov 01 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内存缓存Memcached类实例
2014/12/08 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
brook javascript框架介绍
2011/10/10 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
python实现sublime3的less编译插件示例
2014/04/27 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
详解用python写一个抽奖程序
2019/05/10 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
PyQt5实现简单的计算器
2020/05/30 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
期终自我鉴定
2014/02/17 职场文书
运动会演讲稿300字
2014/08/25 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
大学生见习总结报告
2015/06/24 职场文书
母亲节主题班会
2015/08/14 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js