vue中使用keepAlive(缓存页面及记忆上次浏览位置)
时间:2019-11-21
本文章向大家介绍vue中使用keepAlive(缓存页面及记忆上次浏览位置),主要包括vue中使用keepAlive(缓存页面及记忆上次浏览位置)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
转自博客:https://www.cnblogs.com/nokelong/p/8116631.html
使用keepAlive缓存页面,一可以减少服务器请求次数,二则可以在用户返回上一页后记忆到上次浏览位置
keep-alive的介绍如下:
1,把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。
2、<keep-alive>是抽象组件,它自身不会渲染DOM元素,也不会出现在父组件链中。
3、当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
注:在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。
基本用法:使用keep-alive直接包裹组件
使用keep-alive直接包裹组件
<keep-alive>
<component :is="view"></component>
</keep-alive>
//注:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
如果需要缓存整个项目,则如下设置(直接包裹根router-view即可):
<keep-alive>
<router-view> </router-view>
</keep-alive>
缓存部分页面或者组件,使用route.meta属性
1、在App.vue中设置:(根据是否需要缓存切换模式)
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
2、在router.js路由页设置:
{
path: '/demo/demoIndex',
name: 'DemoIndex',
component: DemoIndex,
meta: {
keepAlive: true, //设置keepAlive为true,则App.vue里的$route.meta.keepAlive即为true
title:'示例页面'
}
}
使用新增属性include/exclude
vue2.1.0 新增了include,exclude俩个属性,允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
注:匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
动态判断,使用v-bind:include
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
includedComponents动态设置即可
使用beforeRouteLeave或者afterEach中进行拦截处理
如在项目在Category组件中的设置:
beforeRouteLeave(to,from,next){
if(to.name=='DemoIndex'){
if(!from.meta.keepAlive){
from.meta.keepAlive=true
}
next()
}else{
from.meta.keepAlive=false
to.meta.keepAlive=false
next()
}
},
在beforeRouteLeave中to.name根据具体的路由进行动态缓存设置。
原文地址:https://www.cnblogs.com/huihuihero/p/11905439.html
- ASP.NET Core中使用IOC三部曲(一.使用ASP.NET Core自带的IOC容器)
- CVE-2017-11882漏洞复现
- ASP.NET Core使用静态文件、目录游览与MIME类型管理
- Python 黑客——使用Python破解门禁系统
- ASP.NET Core文件上传与下载(多种上传方式)
- 采用Opserver来监控你的ASP.NET项目系列(三、监控你的服务器状态)
- eclipse中运行hbase时不能显示表中的值
- 从 PHP 到 Java
- 用Lua定制Redis命令
- 见招拆招-PostgreSQL中文全文索引效率优化
- 通过2-3-4树理解红黑树
- Hmaster无法启动
- C语言第八讲,指针*
- C语言第七讲,函数入门.
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【猫狗数据集】加载保存的模型进行测试
- 【猫狗数据集】划分验证集并边训练边验证
- 【猫狗数据集】使用学习率衰减策略并边训练边测试
- 面试题系列第2篇:new String()创建几个对象?有你不知道的
- spring之整合struts2
- django-URL之include函数(五)
- springmvc之使用ModelAttribute避免不允许被修改的值更新时为空
- 【colab pytorch】使用tensorboard可视化
- django-URL别名的作用(六)
- springmvc之如何确定目标方法Pojo类型的参数?
- 【colab pytorch】使用tensorboardcolab可视化
- 实用,完整的HTTP cookie指南
- django-URL之从URL中获取关键字(七)
- springmvc之使用POJO作为参数
- 【猫狗数据集】利用tensorboard可视化训练和测试过程