详解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 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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/12/14 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
javascript实现拖放效果
2015/12/16 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
React中使用UMEditor的方法示例
2019/12/27 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
最新远光软件笔试题面试题内容
2013/11/08 面试题
家庭教育先进个人事迹材料
2014/01/24 职场文书
生日宴会策划方案
2014/06/03 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
小学大队长竞选稿
2015/11/20 职场文书
教师教育心得体会
2016/01/19 职场文书
会计做账心得体会
2016/01/22 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js