keep-alive
keepAlive
keepAlive是vue中的一个内置组件，它可以在组件切换的时候保留状态，防止重复渲染DOM
keep-alive 做组件级别的缓存，原理是不让组件 destroyed 和 created 。
keep-alive 提供了两个生命周期函数 activated 和 deactivated 替代 destroyed 和 created 。
1<template>
2 <div>
3 <keep-alive>
4 <router-view />
5 </keep-alive>
6 </div>
7</template>
利用路由元信息设置是否缓存
meta对象里面可以定义一些和路径相关的参数配置，可以使用$route获取meta中的isKeep的值来实现选择性保留状态
1const routes = [
2 {
3 path: '/',
4 name: 'Home',
5 component: Home,
6 meta: {
7 isKeep: true
8 }
9 }
10]
1// 写法一：
2<template>
3 <div>
4 <keep-alive>
5 <router-view v-if="$route.meta.isKeep" />
6 </keep-alive>
7 <router-view v-if="!$route.meta.isKeep" />
8 </div>
9</template>
10
11// 写法二：
12<template>
13 <div>
14 <!-- include指定谁可以缓存，数组里的值为组件内部的name属性 -->
15 <keep-alive :include="['Home']">
16 <router-view />
17 </keep-alive>
18 </div>
19</template>
20
21// 写法三：
22<template>
23 <div>
24 <!-- include指定谁不可以缓存，数组里的值为组件内部的name属性 -->
25 <keep-alive :exclude="['Home']">
26 <router-view />
27 </keep-alive>
28 </div>
29</template>
activated
1activated() {
2 // 组件被激活的时候执行,被切换回来的时候
3}
deactivated
1deactivated() {
2 // 组件被取消激活的时候执行，被切换出去的时候
3}
