VUE工程的keep-alive缓存机制（全部缓存、部分缓存、定向缓存）每日一记，

应用场景

1、vue工程，很多时候希望页面不管怎么跳转，返回时候，页面都能保持之前的操作状态，

2、页面跳转不用每次都执行mounted，特别很多请求数据时候，都是从mounted发起，不需要每次跳转都执行一次请求数据。

这就需要使用vue的keep-alive缓存

<template>
      <div id="app">
        <keep-alive >
          <router-view></router-view>
        </keep-alive>
      </div>
 </template>

二、缓存部分页面

缓存部分页面，一般有两种方式：

（1）使用router.meta属性

router-view文件中：（app.vue）

<template>
      <div id="app">
        <keep-alive >
          <router-view v-if="$route.meta.keepAlive"></router-view>   //放需要缓存的组件
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>  //放不需要缓存的组件
      </div>
    </template>

路由配置文件router.js文件中，给需要缓存的路由加上meta属性，并设置值。

{
      path: '/usermanage',
      name: 'usermanage',
      meta: {
        keepAlive: true, //该字段表示该页面需要缓存
      },
      component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
    },

（2）使用vue-router 2.X的include、exclude两个属性，针对性的缓存相应的组件

include属性表示只有name属性为a，b的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存

exclude属性表示除了name属性为a,b的组件不会被缓存，其它组件都会被缓存

在使用router-view标签的vue文件中修改：

<keep-alive include="a,b">
   <router-view></router-view>
</keep-alive>