缓存页面keep-alive

使用场景

一个列表页中存在条件筛选，查询到相关数据后跳转到第二页， 选择一条数据进入详情页，后需要在详情页返回列表页时，列表页不刷新即进入详情页前（第二页，筛选条件依旧存在）的状态，就需要缓存页面。
下来就来讲讲使用keep-alive缓存页面。

keep-alive是什么

• keep-alive是Vue提供的一个内置组件，被keep-alive组件包裹的内部组件，其状态将被缓存

作用

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

生命周期

keep-alive包裹的组件，会自动新增两个生命周期函数
activated（组件激活时执行）
deactivated（组件失活时执行）
初次进入时：beforeRouteEnter>created > mounted > activated；退出后触发 deactivated
再次进入：beforeRouteEnter> activated,事件挂载的方法等；退出后触发 deactivated(只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中)
keep-alive包裹的组件，其生命周期只能被执行一次，再次进入时不会被执行 ，不使用 keep-alive 时 每次切换组件 会重复销毁组件---创建组件 重复发起请求调取数据

keep-alive实现路由缓存主要有三种方式：

缓存所有

<keep-alive>
     <router-view></router-view>
</keep-alive>

使用include或者exclude

include和exclude 可以使用逗号分隔的字符串、正则、数组；并且匹配的都是组件的name属性
数组内的name对应的是component中export出去的name，而不是router的name

缺点：这样缓存页面，虽然可以实现部分组件的缓存，但是会出现生命周期只执行一次，第二次不管从什么地方进入，都不能重新加载页面

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

根据v-if控制显示的router-view（条件缓存）\

针对该文章的使用场景，推荐使用该方法

• 1.待缓存的页面 meta的keepAlive设置为true，其他设置为false或不设置（该例订单管理列表页）

 // 首页
      {
        path: '/homePage',
        name: 'HomePage',
        component: () => import('@/views/homePage/index'),
        meta: { title: '首页' }
      },
      // 订单管理
      {
        path: '/waybill',
        name: 'WaybillManage',
        component: RouteView,
        redirect: '/waybill/list',
        meta: { title: '订单管理' },
        children: [
          {
            path: '/waybill/list',
            name: 'WaybillManage',
            component: () => import('@/views/waybillManage/index'),
            meta: { title: '订单管理', keepAlive: true }
          },
          {
            path: '/waybill/list/:id',
            name: 'addOrCheck',
            component: () => import('@/views/waybillManage/components/addOrCheck'),
            hidden: true,
            meta: { title: '订单详情' }
          }
        ]
      },

• 2.根据v-if设置keep-alive

 <!-- 需要缓存的视图组件 --> 
 <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
 </keep-alive>

 <!-- 不需要缓存的视图组件 -->
 <router-view v-else></router-view>

3.待缓存页面（该例订单管理列表页）index.vue设置keep-alive
离开该页面时，若下一个页面是详情页则缓存，否则不缓存

 beforeRouteLeave (to, from, next) {
    if (to.name === 'addOrCheck') {
      // 进入详情，需要缓存的路由name
      from.meta.keepAlive = true
      next()
    } else {
      from.meta.keepAlive = false
      next()
    }
  },