Vue 缓存当前页面keep-alive

需求：

　　产品经理在列表页（几千个数据，n个page）点击某一项进去到详情页后，再返回到列表页发现页面回到了第一页，找不到之前的查看的是哪一条了，为了方便咋公司产品经理，返回列表页时需要记住之前的page页

解决思路：

　　在列表页点击某一条进入详情页的时候，触发当前页面的keep-alive缓存页面

解决步骤：

1. 设置路由

   需要缓存的路由设置 keepAlive : true, 不需要缓存的路由设置 keepAlive: false

　router index.js

[
  {
    path: '/dm',
    component: Layout,
    redirect: '/dm/basic',
    name: '设备中心',
    meta: {
      title: '设备中心',
      icon: ''
    },
    children: [{
      path: 'basic',
      name: 'Basic',
      component: Basic,
      meta: {
        title: '设备管理',
        keepAlive: true // 需要缓存
      }
    }, {
      path: 'basic/decDetail',
      name: 'DeviceDetail',
      component: DeviceDetail,
      meta: {
        title: '设备详情',
        level: 2,
        hidden: true,
        keepAlive: false // 不需要缓存
      }
    }]
  },
...

2. 列表页

Bacic.vue

activated() {
    //只刷新数据，不改变整体的缓存
    this.getList()
  },
mounted () {
    this.getProductName()
  },
//修改列表页的meta值，false时再次进入页面会重新请求数据。
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  },
...

3.详情页

basicDetail.vue

...
mounted () {
  },
  // 从详情页返回主页时把主页的keepAlive值设置为true（要做个判断，判断是不是返回到主页的）
  beforeRouteLeave (to, from, next) {
    if (to.name === 'Basic') {
      to.meta.keepAlive = true
    } else {
      to.meta.keepAlive = false
    }
    next()
  },
...

4. 这样既可以保证keepAlive缓存了页面，也可以保证再次进入缓存时刷新数据 

activated() { //激活keep-alive缓存 

  this.getList()  // 只刷新数据， 不改变整体的缓存

},

deactivated () { //清除keep-alive的缓存

// this.$destroy(true)

},

　　

在此页面缓存就完成啦，欢迎大家学习交流，本人qq 1542934395