详解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 相关文章推荐
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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/04/20 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
详解Python中用于计算指数的exp()方法
2015/05/14 Python
详解django2中关于时间处理策略
2019/03/06 Python
详解python statistics模块及函数用法
2019/10/27 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
中学自我评价
2014/01/31 职场文书
初中学校军训方案
2014/05/09 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
公司欠款证明
2015/06/24 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
mysql sock文件存储了什么信息
2022/07/15 MySQL