vue keep-alive缓存当前页面

应用场景：
A页面为带搜索框的列表页，进入页面会发送请求获取列表的数据，或者通过搜索条件，发送请求获取数据，点击其中一项会跳转到B详情页。当点击返回的时候，A页面的列表数据以及搜索条件就初始化了。如果想保存A页面跳转之前的页面状态，我开始的做法是将需要的数据保存到storage里，返回的时候再取出数据去请求一次，但是这样做总觉得不太好，于是采用了keep-alive 来缓存整个页面，效果也很好。

文档解释： https://cn.vuejs.org/v2/api/?#keep-alive

使用方法：
router 里，此处为订单列表和订单详情页。跳转到详情，缓存订单列表页

      {
        path: 'orderList',
        name: 'orderList',
        component: () => import('@/pages/order/orderList/index'),
        meta: {
          title: '订单列表',
          keepAlive: true  // 需要缓存
        }
      },
      {
        path: 'orderDetails',
        name: 'orderDetails',
        component: () => import('@/pages/order/orderList/orderDetails'),
        meta: {title: '订单详情'}
      },

router-view 处

     <div>
       <keep-alive>
         <router-view v-if="$route.meta.keepAlive"></router-view>
       </keep-alive>
       <router-view v-if="!$route.meta.keepAlive"></router-view>
     </div>

可以在路由拦截器里，根据条件来设置orderList需不需要被缓存。

 beforeRouteLeave(to, from, next) {
 // 当要去的页面不是orderDetails的时候，页面就不需要被缓存
	to.name === 'orderDetails' ? from.meta.keepAlive = true : from.meta.keepAlive = false
      next();
  }