vue中 keep-alive 组件的作用
在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.
keep-alive 简介
keep-alive
是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
用法也很简单:
<keep-alive>
<component>
<!-- 该组件将被缓存! -->
</component>
</keep-alive>
props
- include - 字符串或正则表达,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
// 组件 a
export default {
name: 'a',
data () {
return {}
}
}
<keep-alive include="a">
<component>
<!-- name 为 a 的组件将被缓存! -->
</component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
<component>
<!-- 除了 name 为 a 的组件都将被缓存! -->
</component>
</keep-alive>可以保留它的状态或避免重新渲染
但实际项目中,需要配合vue-router共同使用.
router-view
也是一个组件,如果直接被包在 keep-alive
里面,所有路径匹配到的视图组件都会被缓存:
<keep-alive>
<router-view>
<!-- 所有路径匹配到的视图组件都会被缓存! -->
</router-view>
</keep-alive>
如果只想 router-view
里面某个组件被缓存,怎么办?
增加 router.meta 属性
// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 Home! -->
</router-view>
</keep-alive> <router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>
返回目录
vue中 keep-alive 组件的作用的更多相关文章
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- 图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法
其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
- Vue中,父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- vue中动态样式不起作用? scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
- Vue中iframe和组件的通信
最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
随机推荐
- iotop命令详解
iotop是top和iostat程序的混合体,能够显示系统中所有运行进程并将进程根据I/O统计信息排序. 这个软件使用了Linux内核的一些新特性,所以需要2.6.20或者更新的内核. 一般默认情况下 ...
- 软raid实现
几种raid类型,我就不在这里赘述了,企业一般都是用raid卡,所以一般使用软raid的非常少,但是也有用的,所以就写一个软raid的实验吧,其实用处不大. 实验环境:centos6.9 需要的硬件: ...
- Codeforces Round #455 (Div. 2) 909E. Coprocessor
题 OvO http://codeforces.com/contest/909/problem/E CF455 div2 E CF 909E 解 类似于拓扑排序地进行贪心, 对于 Ei=0 并且入度为 ...
- 基于sed 的猫狗游戏
1.测试文件 [root@L shells]# cat catDog.txt snake snake pig bird dog cat snake pig bird snake cat bird do ...
- DNS服务基础
DNS服务器的功能 – 正向解析:根据注册的域名查找其对应的IP地址 – 反向解析:根据IP地址查找对应的注册域名(不常用) NS(声明DNS记录) A(正向解析记录) CNAME(解析记录别名) 安 ...
- MFC 下拉框Combo Box
下拉框常用的事件是Change事件.属性常用:Data(英文;分隔),Sort(是否排序) // OnInitDialog()中 m_cbx.SetCurSel();//设置默认选项 //OnBnCl ...
- [Luogu] 宝藏
https://www.luogu.org/problemnew/show/P3959 模拟退火解法 发现prim求最小生成树是明显错误的 因为prim每次要取出边权最小的点 然而在这道T中这样做不一 ...
- 2017 ICPC乌鲁木齐 A Coins 概率dp
Coins 题意:一开始所有n个硬币都是反面朝上的,每次必须拿k个来抛,抛的人足够聪明,问m次之后向上的硬币的期望. 首先说了这个足够聪明的意思,就是只要向反面的有k个就不会sb地去拿向正面的来抛,想 ...
- Eclipse一直building workspace问题解决
今天新导入了一个maven项目,但是总是一直building workspace 解决方案: 去掉图中Maven Project Builder勾选
- CentOS7遇到问题总结
问题1.保护多库版本:libstdc++-4.8.5-28.el7_5.1.i686 != libstdc++-4.8.5-28.el7.x86_64 错误:保护多库版本:libgcc-4.8.5-2 ...