keep-alive基本使用
最后更新于:2022-04-02 05:35:04
## 前言
本文主要介绍vue2中keep-alive的基本用法 。与官网介绍的角度,本文主要从使用场景切入会用到的api。
## 基本用法
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。
~~~
~~~
有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下
` `
备注 : 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素, 要求同时只有一个子元素被渲染。
## 缓存部分页面或者组件
### 结合router.meta
~~~
// 这是目前用的比较多的方式
~~~
router设置
~~~
routes: [
{ path: '/', redirect: '/index', component: Index, mate: { keepAlive: true }},
{
path: '/common',
component: TestParent,
children: [
{ path: '/test2', component: Test2, mate: { keepAlive: true } }
]
}
// 表示index和test2都使用keep-alive
~~~
## 官网文档
- [内置组件--keep-alive](https://cn.vuejs.org/v2/api/#keep-alive)
';