详解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获取当前页面的url网址信息
Jun 12 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
javascript每日必学之循环
Feb 19 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
google广告之另类js调用实现代码
Aug 22 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 和 COM
2006/10/09 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Python实时获取cmd的输出
2015/12/13 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
C语言编程题
2015/03/09 面试题
《唯一的听众》教学反思
2014/02/20 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
对祖国的寄语大全
2014/04/11 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
西湖英语导游词
2015/02/06 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书