keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

props

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

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

<!-- name 为 a 的组件将被缓存！ -->
<keep-alive include="a">
  <component></component>
</keep-alive>

<!-- 除了 name 为 a 的组件都将被缓存！ -->
<keep-alive exclude="a">
  <component></component>
</keep-alive>

vue-router:

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存！ -->
    </router-view>
</keep-alive>

如果只想 router-view 里面某个组件被缓存，怎么办？

使用 include/exclude
增加 router.meta 属性
使用 include/exclude

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

<keep-alive include="a">
    <router-view>
        <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
    </router-view>
</keep-alive>

exclude 例子类似。

缺点：需要知道组件的 name，项目复杂的时候不是很好的选择

增加 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>

优点：不需要例举出需要被缓存组件名称

使用 router.meta 拓展

假设这里有 3 个路由： A、B、C。

需求1：

默认显示 A
B 跳到 A，A 不刷新
C 跳到 A，A 刷新
实现方式

在 A 路由里面设置 meta 属性：

{path: '/',name: 'A',component: A,meta: {keepAlive: true}}

在 B 组件里面设置 beforeRouteLeave：

export default {
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
        next();
    }
};

在 C 组件里面设置 beforeRouteLeave：

export default {
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // 让 A 不缓存，即刷新       
        next();
    }
};

这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。

需求2：
默认显示 C，
B 跳到 A，A 不刷新
C 跳到 A，A 刷新

在 A 路由里面 meta 属性不做设置,C添加一个isFirst

{path: '/',name: 'A',component: A,meta: {keepAlive: true}}
{path: '/',name: 'C',component: C,meta: {isFirst: true}}

B组件跟需求1一样设置beforeRouteLeave：

export default {
    methods: {},
        beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      if(to.path === '/a'){ 
        to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
      }
      next();
    },
};

C组件有些改变，需要做个判断：

export default {
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        if(from.meta.isFirst){
            to.meta.keepAlive = true; // 让 A 不缓存，即刷新
             from.meta.isFirst = false;
        }else{
            to.meta.keepAlive = false;
        }     
        next();
    }
};

这样便能实现 C回到 A，A 刷新；而 B回到 A 则不刷新。

使用keep-alive include +  vuex 实现页面缓存
真实案例：

假设我们有三个界面。query->hotel-list->hotel-detail页面，
query到hotel-list页面需要刷新，hotel-detail返回到hotel-list页面时，不刷新，要保留之前的hotel-list界面；

首先项目里面需要有安装vuex(此处就不讲怎么安装了)，

首先store中添加一个变量 cached:

state = {
  cached: [], // 标记是否刷新搜索页
}

mutations = {
  // 当前缓存
  cached (state, opt){
    console.log(opt)
    state.cached = opt;
  }
}

getters = {
  cached: state => state.cached,
}

然后App.vue 

<!--vue2.x-->
<template>
  <div id="app">
    <keep-alive :include="cached" >
      <router-view/>
    </keep-alive>
  </div>
</template>

<!--vue3.x-->
<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cached">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>



<script>
  export default {
    name: 'App',
    computed: {
      cached () {
        return this.$store.getters.cached
      }
    }
  }
</script>

然后在router.js中添加如下代码：注意：需要缓存的hotel-list页面的name一定要和cached里面的HotelList一致（HotelList）

import store from '@/store';

const router = new Router({
  routes: [...]
})

router.beforeEach((to, from, next) => {
     //首页进入到列表页 
      if((from.path === '/' || from.path === '/Query') && to.path === '/HotelList'){
        store.commit('cached', ['HotelList'])
      }

      if(to.path === '/' ||to.path === '/Query' || to.path === '/HotelDetail'){
        store.commit('cached', [])
      }

      // 列表页进入到房型列表添加缓存
      if(from.path === '/HotelList' && to.path === '/HotelDetail'){
        store.commit('cached', ['HotelList'])
      }
  
      next();
})

看下效果图：