keep-alive顾名思义，保持活跃。就是可以保持组件的状态。

我们知道，因为vue就是组件化编程，一个.vue文件就是一个组件。就像万事万物一样，都有从出生到消亡的生命周期过程，vue的组件也是一样，也有自己的生命周期，比如create创建组件、mounted往组件上挂数据、update更新组件上挂的数据，destroy把组件实例销毁。

所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。

1.keep-alive基本用法

<keep-alive include="viewer">
  <router-view></router-view>
</keep-alive>

keep-alive的两个props ，inclue (包含那些name的组件)和exclude (不包含那些name的组件)。

注意： "include" "exclude" 里写的名字必须和组件内部定义的名字完全一致，这个名字不是路由的名字。

// 组件 viewer
export default {
 name: 'viewer',
 data () {
   return {}
 }
}

2.keep-alive最佳实践用法

当项目比较复杂的时候，组件不可能命名 ，好多，找着也不方便。所以，有另外的写法，参考如下 ：

// routes 配置
export default [
 {
   path: '/',
   name: 'home',
   component: Home,
   meta: {
     keepAlive: true // 需要被缓存
   }
 }, {
   path: '/edit',
   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>

实例

App.vue

<template>
  <div id="app">
    <!-- 路由导航 -->
    <div class="nav">
      <router-link to="/">去home页面</router-link>
      |
      <router-link to="/about">去about页面</router-link>
      |
      <router-link to="/details">去details页面</router-link>
    </div>
    <!-- 路由导航对应的内容区 -->
    <main>
      <keep-alive include="HomeView,AboutView">
        <router-view></router-view>
      </keep-alive>
    </main>
  </div>
</template>
...

HomeView.vue

<template>
  <div class="home">
    <h1>Home</h1>
    <hr>
    <input type="checkbox" v-model="checked"/>备选项
  </div>
</template>

<script>

export default {
  name: 'HomeView',

  data(){
    return{
      checked: false
    }
  }
}
</script>

AboutView.vue

<template>
  <div class="about">
    <h1>About</h1>
    <hr>
    <input type="text" v-model="content" />
  </div>
</template>

<script>

export default {
  name: 'AboutView',

  data(){
    return{
      content: ''
    }
  }
}
</script>

DetailsView.vue

<template>
  <div>
      <h1>Details</h1>
      <hr>
      <select v-model="selectedCity">
        <option v-for="(c,index) in citys" :key="index" :value="c">{{c}}</option>
      </select>
  </div>
</template>

<script>
export default {
  name: "DetailsView",
  data(){
    return{
      selectedCity: '北京',
      citys:['北京','上海','广州','深圳']
    }
  }
}
</script>

<style scoped>

</style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
    /*
    meta:{
      keepAlive: true
    }*/
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '@/views/AboutView.vue'),
    /*
    meta:{
      keepAlive: false
    }*/
  },
  {
    path: '/details',
    name: 'details',
    component: () => import(/* webpackChunkName: "about" */ '@/views/DetailsView.vue')
    /*
    meta:{
      keepAlive: true
    }*/
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

运行效果：

我们发现HomeView和AboutView被保持组件状态了。