如何用keep-alive做组件缓存

最近做了很多后台管理系统，其中有一个常见的需求，就是从列表页跳入详情页后，要求浏览器记住列表页之前的搜索条件和页码，使得从详情页返回列表页之后，页面不刷新，和上次的操作保持一致。
于是问题定位到组件缓存上。。。如何操作？
想到了几种方案：

1. 使用sessionStorage，可行性没什么问题，但是这种方式有一个弊端就是：当系统列表页面特别多时，每个列表页的筛选条件（form表单）和页码都要进行一次sessionStorage存储，比较麻烦。。。
2. 将每个列表的筛选条件和页码存入浏览器地址栏中。。（没试过）
3. 使用keep-alive（本文重点介绍keep-alive如何使用
   结合router，缓存部分页面

• 使用$route.meta的keepAlive属性：

需要在router中设置router的元信息meta：

export default new Router({
  routes: [
    {
      path: '/pagea',
      name: 'pageA',
      component: PageA,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/pageb',
      name: 'pageB',
      component: PageB,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

在组件里进行判断，只有从详情页返回时才需要做缓存，其他情况不需要缓存，需要重新发送ajax请求

1. 将浏览器上一次进入的页面存入一个全局变量中，方便后面进行判断

//  在全局路由守卫中加入这句
router.beforeEach((to, from, next) => {
    window.lastRoute = from.name
}）

2. 在组件中判断

• 使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

activated() {
    // 上一次访问的路由信息不是详情页时
    if (window.lastRoute && window.lastRoute !== 'detail') {
      // 初始化页面信息并重新发送ajax请求
      this.resetPageInfo()
    }
}

注：在缓存的组件里面只有第一次进入组件是才会触发created等生命周期钩子函数，再次进来时只会触发activated 和 deactivated