详解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 验证密码强弱的小例子
Mar 21 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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发送post请求的三种方法
2014/02/11 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
angularJS开发注意事项
2018/05/26 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python守护进程用法实例分析
2015/06/04 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python的range和linspace使用详解
2019/11/27 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
管事部库房保管员岗位职责
2014/02/21 职场文书
银行金融服务方案
2014/06/11 职场文书
发票退票证明
2015/06/24 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
无线电知识基础入门篇
2022/02/18 无线电
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis