关于vue里页面的缓存详解


Posted in Javascript onNovember 04, 2019

keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染。

用法:

关于vue里页面的缓存详解

运行结果描述:

关于vue里页面的缓存详解 input输入框内,路由切换输入框内部的内容不会发生改变。

在keep-alive标签内部添加

include:字符串或正则表达式。只有匹配的组件会被缓存

exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

结合router缓存部分页面:

比较实用的例子:

思路:通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值。从而动态的确定A页面是否需要被缓存。

关于vue里页面的缓存详解

结合router缓存部分页面:

关于vue里页面的缓存详解

比较实用的例子:

关于vue里页面的缓存详解

思路:通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值。从而动态的确定A页面是否需要被缓存。

关于vue里页面的缓存详解

以上这篇关于vue里页面的缓存详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 #Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 #Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 #Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 #Javascript
element-ui table组件如何使用render属性的实现
Nov 04 #Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 #Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 #Javascript
You might like
如何运行/调试你的PHP代码
2020/10/23 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
实例讲解React 组件
2020/07/07 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
Python三元运算与lambda表达式实例解析
2019/11/30 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
自我评价正确写法范文
2013/12/10 职场文书
常务副总经理任命书
2014/06/05 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
javascript函数式编程基础
2021/09/15 Javascript
CentOS MySql8 远程连接实战
2022/04/19 MySQL
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL