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)
';