keep-alive 的作用

        keep-alive是Vue中的内置组件，能在切换过程中把状态保留在内存中，防止重复渲染DOM包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
    prop:
            - include: 字符串或正则表达式。只有匹配的组件会被缓存。
            - exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

    - max - 数字。最多可以缓存多少组件实例。
    keep-alive生命周期钩子函数：

        activated，deactivated        

    场景：

        Vue中前进刷新，后退缓存用户浏览数据
        列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据
        重新进入列表页面 => 获取最新的数据

使用方式：

方式一：在App.vue中使用keep-alive标签，表示缓存所有页面

  <div id="app">
  	<keep-alive>
	    <tar-bar></tar-bar>
	    <div class="container">
	      <left-menu></left-menu>
	      <Main />
	    </div>
    </keep-alive>
  </div>

方式二：按条件缓存，使用include，exclude判断是否缓存

// 1. 将缓存 name 为 cc 的组件,如果有多个，可用逗号分
  	<keep-alive include='cc'>
      <router-view/>
    </keep-alive>
// 2. 将不缓存 name 为 cc 的组件
	<keep-alive exclude='cc'>
  	  <router-view/>
	</keep-alive>
// 3. 还可使用属性绑定动态判断
	<keep-alive :include='includedComs'>
  	  <router-view/>
	</keep-alive>

方式三：在router目录下的index.js中

 const routes = [
  {
    path:'/',
    component:Home,
    meta:{
        keepalive:true
    }
  },
  {
    path:'/login',
    component:Login
  },
   {
      path:'/edit',
      component:Edit,
      meta:{
          istoken: true
      }
   },
  {
      path:'/home',
      component:Home,
      meta:{
          keepalive:true
      }
  }
]

第二步 在App.vue中进行判断

<div id="app">
    <!--keep-alive 表示页面不会被销毁，即保持页面状态-->
    <keep-alive>
      <router-view v-if="$route.meta.keepalive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive"></router-view>
  </div>